javascript preventDefaultの使い方

Question

Django AjaxでIikeボタンの作成をしています。
Likeを押す際にページを読み込みたくないのですが、が読み込まれてしまいます。

preventDefaultの指定箇所をいろいろ変更してみたのですが、読み込まれてしまいます。
そもそも書き方が違うのでしょうか？
他に必要なものがあれば追記いたします。よろしくお願いいたします。

                <form action="{% url 'app:like-post-view' %}" method="POST" class='like-form' id='{{item.id}}'>
                    {% csrf_token %}
                    <input type="hidden" name="post_id" value={{item.id}}>
                    <div class="LikesIcon">
                            {% if user not in item.liked.all %}
                                <i class="far fa-heart LikesIcon-fa-heart"></i><div class="like-count{{item.id}}"></div>
                            {% else %}
                                <i class="fas fa-heart LikesIcon-fa-heart" style="color:red;"></i><div class="like-count{{item.id}}"></div>
                            {% endif %}
                    </div>
                </form>

    <script>
            $('.like-form').click(function() {
                $('form').submit();
            });

            $('.like-form').submit(function(e){
                e.preventDefault()
                
                const post_id = $(this).attr('id')
                
                const hasLike = $(`.LikesIcon${post_id}`).find('i').hasClass('like')
                
                const url = $(this).attr('action')
                
                let res;
                const likes = $(`.like-count${post_id}`).text()
                const trimCount = parseInt(likes)
                
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: {
                        'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
                        'post_id':post_id,
                    },
                    success: function(response) {
                        if(hasLike) {
                            $(`.like-btn${post_id}`).html('<i class="far fa-heart LikesIcon-fa-heart"></i>')
                            res = trimCount - 1
                        } else {
                            $(`.like-btn${post_id}`).html('<i class="fas fa-heart LikesIcon-fa-heart"></i>')
                            res = trimCount + 1
                        }

                        $(`.like-count${post_id}`).text(res)
                    },
                    error: function(response) {
                        console.log('error', response)
                    }
                })
            })
            // Likeボタンクリック
            $('.LikesIcon').on('click', function() {
              let $btn = $(this);
              // Likeボタンがonクラス持っていたら
              if ($btn.hasClass('on')) {

                $btn.removeClass('on');

                // 白抜きアイコンに戻す
                $btn.children("i").attr('class', 'far fa-heart LikesIcon-fa-heart');

              } else {
                $btn.addClass('on');
                $btn.children("i").attr('class', 'fas fa-heart LikesIcon-fa-heart heart');

              }
            })

    </script>

Answer 1

app:like-post-viewに対応するビューに問題があるような気がします。（見てないのでわかりませんが）

DjangoでAjaxするならこちらのサイトが参考になります。view.pyの書き方を確認してみてください。

それと、ajaxでsuccessやerrorを使うのは古いようです。

$ajax({

}).then({

});

などを使いましょう。