javascriptのコードからpythonの関数を実行させたい

Question

実現したいこと

javascriptのコードからpythonの関数を実行させたいです。

前提

flaskを用いてWebサービスを作りたいと思っています。
ボタンの装飾をするため,htmlのbuttonタグを使わず,divタグがクリックされた時に何らかの処理を加える,といった仕組みにしたいのですが,ネットで調べた限りそのような方法はありませんでした。
htmlのボタンから呼び出す際はurl_forを使えば良いので,そのような挙動をする方法を教えていただきたいです。

該当のソースコード

from flask import Flask
from flask import render_template, request, redirect, g

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == "GET":
        return render_template('hoge.html')

    elif  request.method == "POST":
        hoge = request.form.get("setting")
        #なんらかの処理
        return render_template('hoge.html')

<!--hoge.html-->
<script src="test.js"></script>

<form action="{{url_for('index')}}", method="POST">
        <input type = "hidden" name="setting" value="hogo">

        <button  type="submit">実行</button>
        <div id=button>実行</div>
</form>

(function($){
    $(document).ready(function(){
        $("#button").click(function(){
            //ここでindex関数を呼び出したい。
        })

    })

})(jQuery)

<div>を押した時に,buttonを押した時と同じような挙動をさせたいです。

Answer 1

動かしてませんが、

<div id=button>

この部分を、id="button"にすれば、clickイベント取れると思うので動くのでは？

indexの関数の呼び出しは、ajax(ajaxかfetchか、XHRあたり)を使って下さい。
jQuery使うならAjaxで良いと思います。(XHRはおすすめしません。面倒なので。)
ajaxを使う場合、formに書いてあるメソッドは全く関係無いので、ajax処理でメソッドを指定して実行してください。

ついでに、HTMLの<form action="{{url_for('index')}}", method="POST">部分に、余計なカンマがありますが、要らないと思います。

ボタンの装飾をするため,htmlのbuttonタグを使わず,divタグがクリックされた時に何らかの処理を加える,といった仕組みにしたいのです

というか、これだけなら、button要素やinput要素を使い、それにclassやらstyleやらを指定すれば、装飾できるはずです。
面倒な事をしようとしていませんか？

Answer 2

両者が動作する環境はクライアントとサーバーでとそもそも階層が違うので直接呼び出せません。
Ajaxやfetchなどでhttpリクエストを送ってください。

Comments

[m.ts10806]

どのような設計か知らないですが、とりあえずならform送信でいいんじゃないかと思います。