Flask - обновление содержимого страницы без перенаправления в Ajax / JQuery

Question

Я занимаюсь разработкой веб-сайта, который позволяет пользователю следить за достопримечательностями. Когда пользователь нажимает кнопку «следовать», кнопка изменится на следующую. Страница обновляется из-за перенаправления. Но я хочу, чтобы эта страница обновлялась, а не перезагружалась. Я получил некоторую соответствующую информацию из Интернета. Решением является использование Ajax или JQuery, но я до сих пор не знаю, как решить эту проблему.

View

@main.route('/place/<tourist_attraction_name>')
def place_detail(tourist_attraction_name):
    place = Place.query.filter_by(tourist_attraction_name=tourist_attraction_name.first()
    if place is None:
        abort(404)
    return render_template('main/detail/place_detail.html', place=place)


@main.route('/follow/<tourist_attraction_name>', methods=['GET', 'POST'])
@login_required
def follow(tourist_attraction_name):
    place = Place.query.filter_by(tourist_attraction_name=tourist_attraction_name).first()
    if place is None:
        flash('Invalid place name.')
        return redirect(url_for('.index'))
    tourist_attraction_name=place.tourist_attraction_name)
    current_user.follow(place)
    flash('You are now following %s.' % tourist_attraction_name)
    return redirect(url_for('.place_detail', tourist_attraction_name=place.tourist_attraction_name)


@main.route('/unfollow/<tourist_attraction_name>', methods=['GET', 'POST'])
    @login_required
    def follow(tourist_attraction_name):
        place = Place.query.filter_by(tourist_attraction_name=tourist_attraction_name).first()
        if place is None:
            flash('Invalid place name.')
            return redirect(url_for('.index'))
       tourist_attraction_name=place.tourist_attraction_name)
        current_user.unfollow(place)
        flash('You are now following %s.' % tourist_attraction_name)
        return redirect(url_for('.place_detail', tourist_attraction_name=place.tourist_attraction_name)

place_detail.html

<h3>{{ place.tourist_attraction_name }}</h3>
      <p>{% if current_user.is_authenticated %}
            {% if not current_user.is_following(place) %}
                 <a href="{{ url_for('.follow', tourist_attraction_name=tourist_attraction_name) }}"
                           class="btn btn-primary">Add</a>
            {% else %}
                  <a href="{{ url_for('.unfollow',tourist_attraction_name=tourist_attraction_name) }}"
                           class="btn btn-default">Remove</a>
            {% endif %}
                  <b><font color="navy"> &nbsp;&nbsp;&nbsp;&nbsp;Followers: </font></b> <span class="badge">{{ place.followers.count() }}</span>
         {% endif %}</p>

Дополнительный выпуск: {% if condition%} может быть обработан только один раз

<h3>{{ place.tourist_attraction_name }}</h3>
      <p>{% if current_user.is_authenticated %}
            {% if not current_user.is_following(place) %}
                 <button id="follow" onclick="ajax_follow('{{place.tourist_attraction_name}}')" class="btn btn-primary">
            {% else %}
                  <button id="unfollow" onclick="ajax_unfollow('{{place.tourist_attraction_name}}')" class="btn btn-primary">
                           class="btn btn-default">Remove</a>
            {% endif %}
                  <b><font color="navy"> &nbsp;&nbsp;&nbsp;&nbsp;Followers: </font></b> <span class="badge">{{ place.followers.count() }}</span>
         {% endif %}</p>

JS

<button id="follow" onclick="ajax_follow('{{place.tourist_attraction_name}}')" class="btn btn-primary"> <script>
    function ajax_follow(name) {
        $.ajax({
            url: "/follow/" + name, success: function (result) {
                if (result == 'success') {
                    $("#follow").text("Remove");
                }
            }
        });
    }

    function ajax_unfollow(name) {
        $.ajax({
            url: "/unfollow/" + name, success: function (result) {
                if (result == 'success') {
                    $("#unfollow").text("Add");
                }
            }
        });
    }
</script>

Answer 1

Вам необходимо изменить маршруты следования / отмены подписки, чтобы вместо возврата объекта перенаправления с флягой они возвращали ответ на запрос AJAX. Вам также нужно изменить работу кнопок, чтобы они выполняли запрос AJAX, а не указывали на ссылку.

Давайте начнем с кнопок. Прямо сейчас это просто ссылки, вам нужно, чтобы они инициализировали фрагмент JavaScript, который содержит ваш AJAX-запрос, что означает изменение этого:

<a href="{{ url_for('.follow', tourist_attraction_name=tourist_attraction_name) }}"class="btn btn-primary">Add</a>

на что-то вроде этого:

<button id="follow" onclick="ajax_follow('{{tourist_attraction_name}}')">Add</button>

и добавление соответствующего скрипта следующим образом:

<script>
  function ajax_follow(name) {
    $.ajax({url: "/follow/" + name, success: function(result){
      if (result == 'success') {
        $("#follow").text("Remove");
        $("#follow").attr("onclick", "ajax_unfollow('{{tourist_attraction_name}}')"
      }
    }});
  }
</script>

Это выполнит ваш маршрут фляги '/ follow /' с tourist_attraction_name в качестве имени аттракциона и изменит содержание вашей кнопки без перезагрузки страницы. Обратите внимание, что для корректной работы ajax необходимо сначала импортировать jQuery. У вас все еще есть проблема с маршрутом фляги, поскольку он не возвращает «успех», а объект перенаправления фляги. Чтобы это исправить, измените:

return redirect(url_for('.place_detail', tourist_attraction_name=place.tourist_attraction_name)

до:

return "success", 200

Чтобы закончить, вы должны добавить обработку ошибок и сделать что-то подобное для отмены подписки. Я бы порекомендовал обрабатывать ошибки, возвращая неуспешный описательный текст ошибки, если ваша логика маршрута колбы выходит из строя, а затем используя javascript для предупреждения этого текста ошибки.