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>

这将以“ tourist_attraction_name”作为景点名称执行烧瓶的“ / follow /”路线，并更改按钮的内容，而无需重新加载页面。请注意，需要先导入jQuery才能使ajax正常工作。但是，烧瓶路由仍然存在问题，因为它没有返回“成功”，而是烧瓶重定向对象。要解决此问题，请更改：

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

收件人：

return "success", 200

要完成此操作，您应该添加错误处理并为取消跟踪执行类似的操作。如果您的烧瓶路径逻辑出现问题，则ID建议通过返回非成功的描述性错误文本来处理错误，然后使用JavaScript提醒该错误文本。

Flask-在Ajax / JQuery中无需重定向即可更新页面内容

1 个答案: