烧瓶 jquery 停止刷新答案

【问题标题】：flask jquery to stop refresh烧瓶 jquery 停止刷新
【发布时间】：2018-08-28 21:31:15
【问题描述】：

我可以在这里实现本教程：https://pythonprogramming.net/jquery-flask-tutorial/

但是，我想扩展它并使用来自 html 的输入作为变量来执行其他代码。我无法像过去那样获取变量：

lang =request.form['proglang']

并像这样引用它以显示在 html 模板上：

<h3>You responded with: {{ lang }} </h3>

请告诉我如何从我的 html 输入中获取变量

@app.route('/interactive', methods=['GET', 'POST'])

完整代码html模板：

{% block body %}
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type=text/javascript>
        $(function() {
          $('a#process_input').bind('click', function() {
            $.getJSON('/background_process', {
              proglang: $('input[name="proglang"]').val(),
            }, function(data) {
              $("#result").text(data.result);

            });
            return false;
          });
        });

    </script>
</head>

<body>
    <div class='container'>
    <h3>Welcome! Which is the best programming language of them all?</h3>
        <form>
            <input type=text size=5 name=proglang>
            <a href=# id=process_input><button class='btn btn-default'>Submit</button></a>
        </form>
    <p id=result></p>
    </div>



</body>


    <body>
    <div class='container'>
    <h3>You responded with: {{ lang }} </h3>
    </div>
    </body>

{% endblock %}

完整的代码烧瓶：

from flask import Flask
from flask import render_template, url_for, request, redirect
from flask import jsonify

app = Flask(__name__)


@app.route('/interactive', methods=['GET', 'POST'])
def interactive():
    try:
        lang =request.form['proglang']
    except:
        lang = '1234'


return render_template('interactive_v2.html', lang=lang)

@app.route('/background_process')
def background_process():
    try:
        lang = request.args.get('proglang', 0, type=str)
        if lang.lower() == 'python':
            return jsonify(result=lang)
        else:
            return jsonify(result='Try again.')

    except Exception as e:
        return str(e)

if __name__ == '__main__':
    app.run(debug=True)

【问题讨论】：

标签： jquery flask forms

【解决方案1】：

当您使用 ajax（在您的情况下为 $.getJSON）时，您不能使用 jinja 从烧瓶中引用变量。当您进行 ajax 调用时，您正在向 background_process 发送一个请求，它会返回一个 json 响应。此响应无法使用 Jinja（大括号）呈现，只能与 javascript 代码一起使用。

{{lang}} 仅在 interactive 加载时渲染一次。当您从 ajax 获得响应时，您会以 json 格式获得它，并且您必须使用 jquery 来操作或使用数据，而不是 jinja 的花括号

最后，一个 html 文档中不能有多个 <body> 标签。

这里是如何实现您想要的以及正确的 HTML 格式

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type=text/javascript>
        $(function() {
          $('a#process_input').bind('click', function() {
            $.getJSON('/background_process', {
              proglang: $('input[name="proglang"]').val(),
            }, function(data) {
              $("#result").text(data.result);
              // ADD THE FOLLOWING LINE
              $("#lang").text(data.result);


            });
            return false;
          });
        });

    </script>
</head>

<body>
    <div class='container'>
        <h3>Welcome! Which is the best programming language of them all?</h3>
        <form>
            <input type=text size=5 name=proglang>
            <a href=# id=process_input><button class='btn btn-default'>Submit</button></a>
        </form>
        <p id=result></p>
    </div>

    <div class='container'>
        <h3>You responded with: <span id="lang">{{lang}}</span> </h3>
    </div>

</body>

</html>

【讨论】：