Flaskで作ったWEBアプリで非同期通信がしたい

flaskのチュートリアルで一通りのWEBアプリが完成したのですが、非同期通信が上手くいきません。
チュートリアルほぼそのままのブログなのですが、いいね機能を実装しようと思い、いいね数の表示の変更に非同期通信を使いたいです。(ボタンが押されると表示が変わり、画面遷移はしない。ページをリロードした際にデータベースの更新がpythonで実行される、というやり方であっているのでしょうか？)
下のコードでとりあえず通信は成功しているみたいですが、投稿のidといいね数をpythonの関数へどう送ればいいのか分かりません。metoo.jsのdataというのがpython関数へ送られるデータでは無いのですか？

html
1<!-- add for metoo -->
2<!-- ボタンが押されるとmetoo.jsのpost_metoo()が実行される。そしてblog.pyでinsert_metoo()が実行されて、データベースが更新される。 -->
3<input type="button" class= "btn btn-outline-info" value='metoo!' id="{{post['id']}}" onclick="post_metoo(this)"><!-- idは投稿のid。jsで取得する。 -->
4<!-- metooの表示。insert_metoo()から送られたjson文字列からjsで表示することで非同期で更新。idはjsが実行された時にどこを書き換えるかを示すため。リロードされた時にindex()が読み込まれて初めてデータベースの値が読み込まれる -->
5<p>
6metooの数:
7<span id="metoo">{{ post['metoo'] }}</span>
8</p>
9<!-- バッジ -->
10<!-- <span class="badge rounded-pill bg-info text-dark">metoo is 00</span> -->

↓metoo.js(ボタンが押されると投稿のIDといいね数をpythonの関数へ送る(送りたい)、そして表示されているいいね数を１上げたものに書き換える)

JavaScript
1function post_metoo(ele) {
2    window.alert("clicked!");
3    var id_value = ele.id; // eleのプロパティとしてidを取得
4    window.alert(id_value);
5    $.ajax({
6      type: 'POST',
7      url: '/metoo_post',//このURLにアクセスする。blog.pyの/metoo_postがついてる関数が実行されてjsonがjsに返される
8      data: '',//データには最初は何も入っていない
9      contentType: 'application/json',
10    }).then(
11      function (data){
12        window.alert("success!");//動作チェック用
13        window.alert(data);
14        console.log("testlog");
15        // const metoo = JSON.parse(data.ResultSet).metoo//.metooのところは←jsonのキー.index.htmlに書いたid = metoo の部分にjsonデータから取り出して入れる。
16        // document.getElementById('metoo').innerHTML = metoo//index.htmlのid="metoo"を探してタグに囲まれた値をmetooに書き換える
17      },
18      function (){
19        window.alert("failed!");
20      }
21    )
22  }

↓Blog.py(受け取った投稿IDといいね数から、該当するIDの投稿のいいね数を+1してデータベースを更新)

Python
1@bp.route('/metoo_post', methods=['POST'])#ホームで更新されるとこの関数が実行される
2def insert_metoo():#データベースのmetooを更新する。idは投稿ID
3    print("clicked_python")#動作チェック用
4    #データベースからmetooの数、評価された投稿のIDを取り出してmetoosというリストに入れる
5    # post_id = sys.stdin.readline()
6    # print(post_id)
7    # post = get_post(id)
8    # metoo = int(123) #試験用。実際にはjsから送られたjsonの値が入る
9    # db = get_db()#データベースにアクセスする
10    # db.execute(
11    #     'UPDATE post SET metoo = ?'
12    #     'WHERE id = ?',#評価された投稿のIDと投稿のidを紐付け
13    #     (metoo,id)
14    # )
15    # db.commit()
16    # return render_template('blog/index.html',post=post)#htmlへレンダリング
17    return redirect(url_for('blog.index'))

↓vscのターミナルの出力

127.0.0.1 - - [29/Jan/2021 23:19:34] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [29/Jan/2021 23:19:34] "GET /static/starter-template.css HTTP/1.1" 200 -
127.0.0.1 - - [29/Jan/2021 23:19:35] "GET /static/metoo.js HTTP/1.1" 200 -
127.0.0.1 - - [29/Jan/2021 23:19:40] "GET /favicon.ico HTTP/1.1" 404 -
clicked_python
127.0.0.1 - - [29/Jan/2021 23:19:46] "POST /metoo_post HTTP/1.1" 302 -
127.0.0.1 - - [29/Jan/2021 23:19:46] "GET / HTTP/1.1" 200 -

errormaker74

2021/01/29 15:30

Ajax的なことがしたいということですかね？もしそうなら大雑把には下記のような手順になると思います。 1. ボタンをクリックしたらJavaScriptの'post_metoo'関数を呼び出す(contentTypeでJSONを指定してるから、idやその他必要な情報をJSONに含めてdataとして送る) 2. バックエンド(Python)の`insert_metoo`関数内で必要な情報を受け取っていいね数を更新 3. Pythonの`insert_metoo`関数で最新のいいね数を含んだJSONを返す 4. フロントエンドでJSONを受け取ってJavaScriptでいいね数の表示を更新する