web-dev-qa-db-ja.com

JSからPythonにFlaskでデータを送信するにはどうすればよいですか？

Flaskを使用してウェブサイトを作成していますが、ページのデータを使用してpythonコードを実行できるようにしたいと考えています。私はフォームを簡単に使用できることを知っていますが、ユーザー入力を受信するたびに継続的に更新される単一のページであり、何かが発生するたびにページをリロードするのはお尻の大変な苦痛です。 JavaScript内で{{ function() }}を実行できることはわかっていますが、js変数を使用してJavaScript内で{{ function(args) }}を実行するにはどうすればよいですか？これまでのところ、私が考えられる唯一のことは、MongoDBのような外部データベースをjsで更新してからPythonを使用してそれを読み取ることですが、このプロセスではWebサイトの速度が大幅に低下します。

JQueryは、Python関数から辞書オブジェクトのリストを取得して、HTMLで使用できるようにする必要があります。だから私は次のようなことができるようにする必要があります：

JS：

var dictlist = { getDictList(args) };
dictlist.each(function() {
    $("<.Class>").text($(this)['Value']).appendTo("#element");
});

Python：

def getDictList(args):
    return dictlistMadeFromArgs
javascriptjquerypythonflask
13
Sneaky Beaver

JavaScriptからFlaskでPythonに）データを取得するには、データを使用して AJAX POST リクエストまたは AJAX GET リクエストを作成します。

Flask 6つのHTTPメソッドが利用可能 、そのうちGETとPOSTのみが必要です。どちらもjsdataをパラメーターとして受け取りますが、取得方法は異なります。 PythonとJavascriptのような2つの異なる環境で2つの完全に異なる言語がデータを交換する方法です。

まず、FlaskでGETルートをインスタンス化します。

_@app.route('/getmethod/<jsdata>')
def get_javascript_data(jsdata):
    return jsdata
_

またはPOST one：

_@app.route('/postmethod', methods = ['POST'])
def get_post_javascript_data():
    jsdata = request.form['javascript_data']
    return jsdata
_

最初のものは、次のように AJAX GET を使用して_/getmethod/<javascript_data>_によってアクセスされます。

_$.get( "/getmethod/<javascript_data>" );
_

AJAX POST リクエストを使用した2番目のリクエスト：

_$.post( "/postmethod", {
    javascript_data: data 
});
_

ここで、_javascript_data_は、JSON辞書または単純な値のいずれかです。

JSONを選択する場合は、PythonでJSONに変換してください。

_json.loads(jsdata)[0]
_

例えば。

取得する：

_@app.route('/getmethod/<jsdata>')
def get_javascript_data(jsdata):
    return json.loads(jsdata)[0]
_

役職：

_@app.route('/postmethod', methods = ['POST'])
def get_post_javascript_data():
    jsdata = request.form['javascript_data']
    return json.loads(jsdata)[0]
_

逆にそれを行う必要がある場合は、PythonデータをJavascriptにプッシュし、JSONエンコードされたdictを返すパラメーターのない単純なGETルートを作成します。

_@app.route('/getpythondata')
def get_python_data():
    return json.dumps(pythondata)
_

JQueryから取得してデコードします。

_$.get("/getpythondata", function(data) {
    console.log($.parseJSON(data))
})
_

json.loads(jsdata)[0]の_[0]_が存在するのは、PythonでJSONエンコードされたdictをデコードすると、内部に単一のdictを持つリストが取得され、インデックス0に格納されるため、JSONデコードされたデータは次のようになります。 ：

_[{'foo':'bar','baz':'jazz'}] #[0: {'foo':'bar','baz':'jazz'}]
_

必要なのはリスト内ではなく内部のdictだけなので、アイテムはdictであるインデックス0に格納されます。

また、_import json_。

30
Alper Turan