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

Question

I am making a test website for a supermarket as an educational exercise with Python+Flask.

When the homepage of the website is loaded I make an api call to get the top selling items in the supermarket, then I pass this information to my homepage html and render it.

Homepage Route

@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>

This works fine.

My api also has other endpoints that can provide information on items that are on sale and is updated regularly.

Here is what I want to achieve:

I want to be able to add a button to my home.html file that I can click and it can change from displaying the top selling items to the items that are on sale without reloading the page!

Here is what I have done thus far:

Created a new button that will sit above my item list:

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

Now to write some js

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

So when the document is ready I look for the button with id saleItems to be clicked then I want to modify my list with id itemList to display only the sale items.

The problem is is that I don't know how the best way to update the list in the html.

There are two paths I think might work:

1) On my home route I always make multiple requests and pass all these to the home html like so

@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)

If I do this then I just need to figure out how to change the list from iterating over top_items to sale_items . (I don't know how to do this)

This doesn't seem the best practise as I will be making the 2 requests instead of 1 and that second request may never be used, for instance if the user does not press the sale items button.

This is also not very scalable, for instance what about if I add another list for new items.

This leaves me with option

2) Somehow make the request on the button press, however I am not sure how to pass the results of this request back to html and how to tell it to render that.

This seems better practise and more scalable.

I would appreciate some help in this matter!

Thank you.

Answer 1

This is what I think could happen to keep things as DRY as possible. Please note that I haven't tested this. Tell me if you have questions about any part.

1. have your different buttons for the different list item types,
2. have a route return the appropriate HTML,
3. an AJAX call to get that HTML.

Item 1: buttons for each list type:

<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 -->

Item 2: your route could look something like:

@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

Item 3: your AJAX call could be:

  <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>