web-dev-qa-db-ja.com

javascriptからFlask

Jinjaテンプレートを使用してpythonからjavascriptにデータを渡す方法を知っていますが、javascript変数をpythonに渡したいのですが、ページをリロードせずに渡したいのですが、可能ですか? ?

12
blueintegral

はい、monkutが言ったように、JSONとJavascript/jQueryを使用したいと思います。

これにより、クライアントからサーバーへの通信とその逆の通信が可能になります。

私が見つけた最も適切な例は、Flaskスニペット/パターン: http://flask.pocoo.org/docs/patterns/jquery/

4
Allan Anderson

私は自分のプロジェクトで同様の作業を行いました。ここでコードを共有したいと思います。どの投稿が選択されているかを確認する必要があり、後で比較するために使用できるように、選択した投稿をサーバー側でグローバル変数として設定していました。これが、選択した投稿をJavascriptに渡す方法です。

<a class="label label-primary"  onclick="myFunction({{very.id}})" > Compare</a>

JavascriptからFlaskへ。

function myFunction(x) {
        $.getJSON($SCRIPT_ROOT + '/check_selected', {
        post: x
        }, function(data) {
            var response = data.result;
            console.log(response);
            }
        });
}

これは、JSONを使用してflaskから結果を返す方法です。

import json
@main.route('/check_selected', methods=['GET','POST'])
def check_selected():
    global selected
    post = request.args.get('post', 0, type=int)
    return json.dumps({'selected post': str(post)});

前述のように ここ 、jqueryをロードするためにGoogle AJAX APIを含める必要があります:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{
  url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
5
Waqar Detho

ビューコードからjsonDataなどのJSON文字列を作成し、Jinjaテンプレートに次のように記述します。

<script type="text/javascript">
    var data = {{ jsonData }};
</script>
0
abc def foo bar