使用jquery停止刷新_Jquery_Flask_Forms

使用jquery停止刷新

jquery flask forms

使用jquery停止刷新,jquery,flask,forms,Jquery,Flask,Forms,我可以在这里实现本教程：但是，我想对它进行扩展，并将来自html的输入用作变量来编写其他代码。我无法像过去那样抓取变量： lang =request.form['proglang'] 并像这样引用它以显示在html模板上： <h3>You responded with: {{ lang }} </h3> {% block body %} <head> <script src="//ajax.googleapis.com/ajax/libs/

我可以在这里实现本教程：

但是，我想对它进行扩展，并将来自html的输入用作变量来编写其他代码。我无法像过去那样抓取变量：

lang =request.form['proglang']

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

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

{% 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 %}

完整代码html模板：

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

{% 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 %}

当您使用ajax时，您不能使用jinja引用flask中的变量（在您的例子中是$.getJSON）。当您进行ajax调用时，您向

background\u进程

发送一个请求，它返回一个json响应。此响应不能用Jinja（花括号）呈现，只能与javascript代码一起使用

{{lang}

在加载

交互式

时仅渲染一次。当您从ajax得到响应时，它是json格式的，您必须使用jquery来操作或使用数据，而不是jinja的花括号

最后，html文档中不能有多个

标记

下面是如何实现您想要的内容和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>


$（函数（）{
$（'a#process_input'）.bind（'click'，function（））{
$.getJSON（“/background\u process”{
proglang:$（'input[name=“proglang”]”）。val（），
}，函数（数据）{
$（“#结果”）.text（data.result）；
//添加以下行
$（“#lang”）.text（data.result）；
});
返回false；
});
});
欢迎哪一种是最好的编程语言？

你的回答是：{{lang}