Question

我的页面上有搜索表单，一旦输入内容，我渲染相同的模板，但搜索结果作为列表输出给用户。用户可以点击他喜欢的结果。如果用户喜欢结果（通过点击like按钮），我想将这些数据传回我的路线，对结果进行一些重新处理。当用户点击类似内容时，如何在不刷新整个页面的情况下将变量值从模板传递到我的路径？

<form class="form-container" method="POST" action="">
  <div class="row">
    <div class="col-sm-12 form-group">
      <input type="text" name="input" id="input" autofocus placeholder="Type your query here!" autocomplete="off" />
    </div>
  </div>
  <input type="submit" style="display:none" />
</form>

{% if output %}
{% for result in output %}
<div>
{{result}}
<span type="button" id={{tag_like_btn}}><i style="color: red" class="fas fa-heart"></i></span>
</div>
{% endfor %}
{% endif %}

@irsystem.route('search', methods=['GET', 'POST'])
def search():
    print ("search")
    form = request.form
    form_submitted = False
    if request.method == 'POST':
        print ("Form submitted...")
        form_submitted = True
        results = [("Article1", 60), ("Article2", 50), ("Article 3", 40)]
        return render_template('search.html', form=form, form_submitted_status=form_submitted, output=results)
    return render_template('search.html', form=form)

Answer 1

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

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

Answer 2

您需要使用ajax为动态网页供电。首先，创建搜索页面，在ajax部分中使用script，在其自己的文件中创建另一段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>

results.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_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})

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

2 个答案: