Javascript 从jinja2模板传递变量到Flask中的路由_Javascript_Python_Flask_Jinja2

Javascript 从jinja2模板传递变量到Flask中的路由

javascript python flask

Javascript 从jinja2模板传递变量到Flask中的路由,javascript,python,flask,jinja2,Javascript,Python,Flask,Jinja2,我的页面上有搜索表单，一旦您输入了一些内容，我就会呈现相同的模板，但搜索结果会作为列表输出给用户。用户可以点击他喜欢的结果。如果用户喜欢某个结果（通过单击like按钮），我希望将该数据传递回我的路由，以便对结果进行重新处理。当用户单击like时，如何在不刷新整个页面的情况下将变量值从模板传递到路由 {%if输出%} {输出%中的结果为%0} {{result}} {%endfor%} {%endif%}如果希望在不重新加载页面的情况下运行这种任意逻辑，则必须使用JavaScript处理发送A

我的页面上有搜索表单，一旦您输入了一些内容，我就会呈现相同的模板，但搜索结果会作为列表输出给用户。用户可以点击他喜欢的结果。如果用户喜欢某个结果（通过单击like按钮），我希望将该数据传递回我的路由，以便对结果进行重新处理。当用户单击like时，如何在不刷新整个页面的情况下将变量值从模板传递到路由


{%if输出%}
{输出%中的结果为%0}
{{result}}
{%endfor%}
{%endif%}

如果希望在不重新加载页面的情况下运行这种任意逻辑，则必须使用JavaScript处理发送AJAX请求的问题。然后，您的Flask搜索处理程序（或者理想情况下使用GET方法分离处理程序）应该返回一些带有已找到文章数据的轻量级JSON。JavaScript从Flask服务器接收到数据后，应该动态创建DOM元素并用接收到的数据填充它

为了使代码更容易理解，我总是使用JavaScript呈现结果表-这样您就不必在Flask的模板中复制代码。

您需要使用

ajax

来支持动态页面。首先，使用

script

部分中的

ajax

创建搜索页面，并使用模板在其自己的文件中创建另一个HTML片段以显示结果：

search.html

：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <input type="text" id="search">
  <button type='button' id='search_button'>Search</button>
  <div id='place_for_results'></div>
  <script>
     $(document).ready(function() {
        $('#search_button').click(function(){
            var query = $('#search').val();
           $.ajax({
            url: "/search_result",
           type: "get",
           data: {search:query},
           success: function(response) {
            $("#place_for_results").html(response.results);
            },
          error: function(xhr) {
           //Do Something to handle error
          }
         });
        });
     });
  </script>
</html>

{%for result in results%}
   <div>
     {{result.val}}
     <span type="button" id={{result.btn}}><i style="color: red" class="fas fa-heart"></i></span>
  </div>
 {%endfor%}

然后，在

app.py

中，创建用于呈现

search.html

的路由和另一个用于接收查询的路由

/search\u result

：

from collections import namedtuple
@app.route('/search', methods=['GET'])
def search():
  return flask.render_template('search.html')

@app.route('/search_result')
def search_for():
   query = flask.request.args.get('search')
   result = namedtuple('result', ['val', 'btn'])
   vals = [("Article1", 60), ("Article2", 50), ("Article 3", 40)]
   #below is a very simple search algorithm to filter vals based on user input:
   html = flask.render_template('results.html', results=[result(a, b) for a, b in vals if query.lower() in a.lower()])
   return flask.jsonify({'results':html})