Question

我正在开发一个用于学习目的的Web应用程序，并尝试边走边学。我尝试实现的功能是一个没有页面刷新的“喜欢/不喜欢”按钮。我遵循了一些指南，并试图尽可能地了解Ajax。但是，单击“喜欢”按钮后，页面将重定向到带有“成功”的空白页面。我知道我缺少一些基本知识，但几个小时后发现自己无法解决问题：

查看

@app.route('/like/<int:album_id>/<action>')
def like_action(album_id, action):
    album = Album.query.filter_by(id=album_id).first_or_404()
    likeunlike = action
    if likeunlike == 'like':
        current_user.like_album(album)
        db.session.commit()
        return "success", 200
    if likeunlike == 'unlike':
        current_user.unlike_album(album)
        db.session.commit()
        return "success", 200

album.html

{% if current_user.is_authenticated %}
        {% if current_user.has_liked_album(album) %}
                <a class="like-button unlike" id="unlike_{{ album.id }}" href="{{ url_for('like_action', album_id=album.id, action='unlike') }}"><i class="fas fa-heart wax"></i></a>
        {% else %}
                <a class="like-button like" id="like_{{ album.id }}" href="{{ url_for('like_action', album_id=album.id, action='like') }}"><i class="far fa-heart wax"></i></a>
        {% endif %}
{% endif %}

JS

$(document).ready(function () {

        // like and unlike click
        $(".like, .unlike").click(function () {
            var id = this.id;   // Getting Button id
            var split_id = id.split("_");

            var text = split_id[0];
            var album_id1 = split_id[1];  // albumid



            // AJAX Request
            $.ajax({
                url: '/like',
                type: 'post',
                data: { album_id: album_id1, likeunlike: text },
                dataType: 'json',
                success: function (data) {
                    var like = data['like'];
                    var unlike = data['unlike'];

                    $("#like_" + album_id).json(data);        // setting likes
                    $("#unlike_" + album_id).json(data);    // setting unlikes


                }

            });

        });

    });

Answer 1

我认为您必须停止像链接那样的行为。您可以使用 event.preventDefault()。此处更多信息：preventDefault() on an <a> tag

Flask-使用Ajax / JQuery的“喜欢/不喜欢”按钮失败

1 个答案: