如何使用 jquery + flask 请求更新 html 而无需重新加载网页？

Question

我正在为超市制作一个测试网站，作为 Python+Flask 的教育练习。

当网站的主页被加载时，我调用 api 来获取超市中最畅销的商品，然后我将此信息传递给我的主页 html 并呈现它。

首页路线

@app.route('/')
def home():
    top_items = requests.get(MY_API_URL).json()
    return render_template('home.html', top_items=top_items)

home.html

<ul id="itemList">
{% for food in top_items %}
  <li>food.name</li>  
{% endfor %}
</ul>

这很好用。

我的 api 还具有其他端点，可以提供有关正在销售的物品的信息并定期更新。

这是我想要实现的目标：

我希望能够在我的home.html 文件中添加一个按钮，我可以单击该按钮，它可以从显示最畅销的商品变为正在销售的商品，而无需重新加载页面！

这是我迄今为止所做的：

创建了一个位于我的项目列表上方的新按钮：

<button id="saleItems">Sale Items</button>
<ul id="itemList">
{% for food in top_items %}
...

现在写一些js

$(document).ready(function(){
  $("#saleItems").click(function(){
    $("#itemList").//I get stuck here!
  });
});

因此，当文档准备就绪时，我会查找要单击的 ID 为 saleItems 的按钮，然后我想修改 ID 为 itemList 的列表以仅显示销售项目。

问题是我不知道如何在 html 中更新列表的最佳方式。

我认为有两条路可行：

1) 在我的主路由上，我总是发出多个请求并将所有这些请求传递给主 html，就像这样

@app.route('/')
def home():
    top_items = requests.get(MY_API_URL).json()
    sale_items = requests.get(MY_API_URL_2).json()
    return render_template('home.html', top_items=top_items, sale_items=sale_items)

如果我这样做，那么我只需要弄清楚如何将列表从迭代 top_items 更改为 sale_items。 （我不知道该怎么做）

这似乎不是最佳做法，因为我将发出 2 个请求而不是 1 个请求，并且可能永远不会使用第二个请求，例如，如果用户没有按下销售项目按钮。

这也不是很可扩展，例如，如果我为新项目添加另一个列表会怎样。

这给我留下了选择

2) 以某种方式在按钮按下时发出请求，但是我不确定如何将此请求的结果传递回 html 以及如何告诉它呈现。

这似乎是更好的做法，并且更具可扩展性。

在这件事上我希望能得到一些帮助！

谢谢。

Answer 1

这是我认为尽可能保持干燥的方法。请注意，我没有对此进行测试。如果您对任何部分有任何疑问，请告诉我。

1. 为不同的列表项类型提供不同的按钮，
2. 有一个路由返回适当的 HTML，
3. 获取该 HTML 的 AJAX 调用。

第 1 项：每种列表类型的按钮：

<button id="click-btn" type="button" submiturl="/item-list/top">Top</button>
<button id="click-btn" type="button" submiturl="/item-list/sale">Sale</button>
<div id="click-response"></div><!-- placeholder for response HTML -->

第 2 项：您的路线可能类似于：

@app.route('/item-list/<item_type>', methods=('POST',))
def item_list(item_type):
    if request.method == "POST":
        items = requests.get(MY_API_URL + '/' + item_type).json()
        response = '''<ul id="itemList">'''
        for item in items:
            response += '''<li>{item.name}</li>''' 
        response += '''</ul>'''
        return response

第 3 项：您的 AJAX 调用可能是：

  <script>
    $(document).ready(function() {
        $("#click-btn").on('click touchstart', function() {
            $.ajax({
                url: "{{ url_for('item_list', item_type=$(this).attr('submiturl')) }}",
                method: "POST",
                success: function(response) {
                    console.log(response);
                    $('#click-response').replaceWith(response);
                },
                error: function(xhr) {
                    console.log(xhr);
                }
            });
        });
    });
  </script>