Flask - 在 Ajax/JQuery 中更新页面内容而不进行重定向

Question

我正在开发一个允许用户关注旅游景点的网站。当用户点击关注按钮时，该按钮将变为取消关注。然后由于重定向而刷新页面。但我想要的是让这个页面更新而不是重新加载。我从网上得到了一些相关信息。解决方案是使用 Ajax 或 JQuery，但我仍然不知道如何解决这个问题。

查看

@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 请求，而不是指向链接。

让我们从按钮开始。现在它们只是链接，你需要让它们初始化一段包含你的 AJAX 请求的 JavaScript，这意味着改变这个：

<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 作为景点名称，并在不重新加载页面的情况下更改按钮的内容。请注意，需要首先导入 jQuery 才能使 ajax 正常工作。但是，烧瓶路线仍然存在问题，因为它没有返回“成功”，而是返回烧瓶重定向对象。要解决此问题，请更改：

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

到：

return "success", 200

最后，您应该添加错误处理并执行类似的操作以取消关注。如果您的烧瓶路由逻辑出错，我建议通过返回不成功的描述性错误文本来处理错误，然后使用 javascript 来提醒该错误文本。