質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

JavaScriptからFlaskにデータを送る方法

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,435

score 13

オセロAIのwebアプリを作ろうと考えています.

オセロの手の思考はPythonで行い,画面の表示はHTML, JavaScriptを用いて行う予定です.
そこで,人の打つ手をJavaScriptからPythonのFlaskに送信したいのですが,どのようにすればできるのでしょうか?調べてもFlaskからJavaScriptにデータを送信する方法しか見つからなかったので,教えていただきたいです.

from flask import Flask, render_template, request, session, url_for
import numpy as np

app = Flask(__name__)
board = np.random.randint(0, 3, (8, 8)).tolist()

@app.route('/', methods=['GET', 'POST'])
def index():
    print(board)
    return render_template('index.html', board=board)


@app.route('/play', methods=['GET', 'POST'])
def play():
    if request.method == 'POST':
        play = request.args.get("index")
        print(play)
        if play:
            print(int(play))
            board[play//8][play%8] = 1
    return render_template('index.html', board=board)


if __name__ == '__main__':
    app.run()
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Othello</title>
  <style>

    .table {
      position:absolute;
      top: 50%;
      left: 50%;
      margin-top: -257px;
      margin-left: -257px;
    }

    .table td {
      width: 60px;
      height: 60px;
      background-color: #ddd;
      text-align: center;
      font-size: 3.8vw;
      cursor: pointer;
    }

    .list {
      max-width: 750px;
      margin: 0 auto;
      list-style: none;
      background-color: #fff;
      padding: 0;
    }

    .list-item {
      display: flex;
      display: -webkit-flex;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      border-bottom: 2px solid #ddd;
    }
    .list-item > * {
      width: 50px;
      padding: 5px 10px;
      text-align: center;
    }
    .list-item *:last-child {
      -webkit-flex-grow: 1;
      flex-grow: 1;
    }
  </style>
  <script src="static/js/script.js"></script>
</head>
<body>
  <p id="index">index</p>
  <table class="table" id="board">
    {% for col in board %}
      <tr>
        {% for row in col %}
          {% if row == 1 %}
            <td></td>
          {% elif row == 2 %}
            <td></td>
          {% elif row == -1 %}
            <td>?</td>
          {% else %}
            <td></td>
          {% endif %}
        {% endfor %}
      </tr>
    {% endfor %}
  </table>
</body>
</html>
window.onload = function(){

  var $tableElements = document.getElementsByTagName('td');
  let order = true;
  let othelloWhte = '◯';
  let othelloBlack = '●';
  let othelloColor = othelloBlack;
  var index_show = document.getElementById("index");

  for (let $i=0; $i < $tableElements.length; $i++) {
    $tableElements[$i].addEventListener('click', function(){
      let tableElements = [].slice.call($tableElements);
      let index = tableElements.indexOf(this);
      index_show.innerHTML = index;
      putOthello(index);
      changeOrder();
    });
  }


  function putOthello(index) {
    $tableElements[index].innerHTML = othelloColor;
  }
  function changeOrder() {
    if (order) {
      othelloColor = othelloWhte;
      order = false;
    } else {
      othelloColor = othelloBlack;
      order = true;
    }
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

JavaScriptからサーバへデータを送りたいなら、getかpostを使って送れば良いと思います。
手を送りたいということですので、postあたりを使えば良いと思います。
JavaScriptでPOSTする場合は、XMLHttpRequestやjQueryやFetchを使うのが一般的と思います。

以下を参考に送ってみてください。
XMLHttpRequest.send()
$.post() (jQuery 1.9)
Fetch を使う

flask側でpostを受け取る設定にしているようですので、データは受けられるはずです。
どんなデータ形式で送信するかにより処理は変わると思いますので、自分が分かり安いのを使うと良いと思います。
(受けるところは後にして、とりあえず送る方を実装しましょう)

postがよくわからない場合は、とりあえずフォーム作って「送信」を押して、どのような動きをするのか確認してみたらよいでしょう。
<FORM> …… 入力・送信フォームを作成する

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/25 11:51

    fetch()を使って解決できました.
    ありがとうございました.

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る