Flask - кнопка Like / Unlike при использовании Ajax / JQuery безуспешно

Question

Я занимаюсь разработкой веб-приложения для обучения и стараюсь учиться по ходу обучения. Функциональность, которую я пытаюсь реализовать - это кнопка «Мне нравится / не нравится» без обновления страницы. Я следовал нескольким руководствам и пытался понять 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(). Более подробная информация здесь: protectDefault () для тега