Как использовать 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!
  });
});

Поэтому, когда документ готов, я ищу кнопку th id saleItems, который нужно нажать, затем я хочу изменить свой список с идентификатором 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

Это то, что, я думаю, могло бы произойти, чтобы все было как можно более 1019 *. Обратите внимание, что я не проверял это. Скажите, если у вас есть вопросы по какой-либо части. У

1. есть разные кнопки для разных типов элементов списка, у
2. есть маршрут, возвращающий соответствующий HTML,
3. и AJAX вызов для получения этого HTML.

Элемент 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>