Javascript 使用Ajax自动刷新页面的Like按钮

我正在尝试将Ajax添加到我的“喜欢”按钮中，以避免每次都刷新，同时自动更新计数，但由于某些原因，该按钮无法正常工作，页面会不断刷新：

因此，当我试图在Google Chrome控制台日志中调试代码时，我一直收到以下错误：

127.0.0.1/：96未捕获引用错误：$未定义

并且

DevTools未能加载SourceMap:无法加载chrome的内容-extension://gannpgaobkkhmpomoijebaigcapoeebl/bundle.min.js.map: HTTP错误：由于某种原因，状态代码404，net:：ERR_UNKNOWN_URL_SCHEME

。我不是JS方面的专家，但我正在努力了解这里发生了什么

我的like按钮模板如下：

      <form action="{% url 'blog:like-post' %}" method="POST" class="like-form" id="{{post.id}}">

        {% csrf_token %}

        <input type="hidden" name="post_id" value='{{post.id}}'>

        <button type="submit" class="like-btn{{post.id}}">

        {% if user not in post.liked.all %}

          Like

        {% else %}

          Unlike

        {% endif %}

        </button>

        <div class="like-count{{post.id}}">{{ post.num_likes }} Likes</div>
      </form>

{%csrf_令牌%}
{%如果用户不在post.liked.all%}
喜欢
{%else%}
不像
{%endif%}
{{post.num_likes}}喜欢

这是剧本

<script>
        $( document ).ready(function() {
            let display = false

            $('.like-form').submit(function(e){
                e.preventDefault()

                const post_id = $(this).attr('id')

                const likeText = $(`.like-btn${post_id}`).text()
                const trim = $.trim(likeText)

                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(trim === 'Unlike') {
                            $(`.like-btn${post_id}`).text('Like')
                            res = trimCount - 1
                        } else {
                            $(`.like-btn${post_id}`).text('Unlike')
                            res = trimCount + 1
                        }

                        $(`.like-count${post_id}`).text(res)
                    },
                    error: function(response) {
                        console.log('error', response)
                    }
                })

            })
        });
  </script>

$（文档）.ready（函数（）{
让显示=假
$（'.like form'）.submit（函数（e）{
e、 预防默认值（）
const post_id=$（this.attr（'id'））
const likeText=$（`.like btn${post_id}'）.text（）
常量修剪=$.trim（如文本）
常量url=$（this.attr（'action'））
让我们重新来过；
const likes=$（`.like count${post_id}'）。text（）
常量trimCount=parseInt（likes）
$.ajax({
键入：“POST”，
url:url，
数据：{
'csrfmiddlewaretoken'：$（'input[name=csrfmiddlewaretoken]'）。val（），
“post\u id”：post\u id，
},
成功：功能（响应）{
如果（修剪==='不同'）{
$（`.like btn${post_id}`）.text（'like'）
res=trimCount-1
}否则{
$（`.like btn${post_id}`）.text（'不像'）
res=trimCount+1
}
$（`.like count${post\u id}`）.文本（res）
},
错误：函数（响应）{
console.log（'错误'，响应）
}
})
})
});

如果将jquery用作错误状态$is not，是否包含了它defined@iklinac是的，我在基本html中添加了

，您的浏览器很可能找不到该源代码进一步查看@iklinac这是它没有显示的唯一原因吗？