Django使用Ajax实现视频点赞时点击按钮未向服务器发请求如何解决

核心问题原因 #

1. 若你的script.js是独立的静态文件，Django模板语法{% url "courses:like" %}、{{ csrf_token }}不会被渲染解析，直接原样输出会导致url无效、csrf校验失败，JS执行异常请求根本发不出去
2. 后端代码存在多处拼写错误，请求触发后也无法正常处理
3. Django 3.1+ 版本废弃了原生request.is_ajax()方法，判断逻辑直接失效
4. 点赞按钮type为submit，存在默认提交表单的冲突风险

分步修复 #

1. 调整detail_video.html代码，将模板渲染的变量暴露给JS读取 #

<h5 class="mt-4">{{ object.caption }}</h5>
<div class="row">
    <div class="col-md-6 text-muted">
        <p>{{ object.date_time | date:"M d, Y" }}</p>
        <a class="category-link" href="{% url 'courses:category-list' object.category.pk %}">{{ object.category }}</a>
    </div>
    <div class="col-md-6 text-muted text-right">
        {% if request.user.is_authenticated %}
            <span class="" id="like-count">{{ object.like_count }}</span>
            <!-- 新增data-like-url属性存储点赞接口地址，修改button类型为button -->
            <button type="button" class="btn btn-outline-light btn-outline-dark" id="like-button" value="{{ object.pk }}" data-like-url="{% url 'courses:like' %}">
                <ion-icon name="thumbs-up-sharp"></ion-icon>
            </button>
            <!-- 新增隐藏input存储csrf token -->
            <input type="hidden" id="csrf-token" value="{{ csrf_token }}">
        {% endif %}
    </div>
</div>

2. 调整script.js代码，移除模板语法，从DOM读取参数 #

// 提前确认页面已正确引入jQuery，否则$符号未定义会直接报错
$(document).on('click', '#like-button', function (e) {
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: $(this).data('like-url'), // 从按钮的data属性读取接口地址
      dataType: 'json',
      data: {
        videoid: $(this).val(),
        csrfmiddlewaretoken: $('#csrf-token').val(), // 从隐藏input读取csrf
        action: 'post'
      },
      success: function (json) {
        document.getElementById("like-count").innerHTML = json['result']
      },
      error: function(xhr,errmsg,err) {
        console.log(xhr.status + ": " + xhr.responseText);
      }  
    });
});

3. 修复views.py中的拼写错误，兼容高版本Django的ajax判断 #

# 先自定义ajax判断方法，适配Django 3.1+版本
def is_ajax(request):
    return request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest'

class Like(View):
    def post(self, request, *args, **kwargs):
        if request.POST.get('action') == 'post' and is_ajax(request):
            # 修复Post大写错误，应为小写POST
            pk = int(request.POST.get('videoid'))
            video = get_object_or_404(Video, pk = pk)
            # 修复exsits拼写错误，应为exists
            if video.likes.filter(pk=request.user.pk).exists():
                video.likes.remove(request.user)
                video.like_count -= 1
                result = video.like_count
                video.save()
            else:
                video.likes.add(request.user)
                video.like_count += 1
                result = video.like_count
                video.save()
            return JsonResponse({'result': result})
        # 新增异常返回，方便排错
        return JsonResponse({'error': '非法请求'}, status=400)

排查验证 #

点击点赞按钮时打开浏览器F12控制台，查看是否有JS报错、网络请求是否正常发出，就能快速定位剩余问题。

内容的提问来源于stack exchange，提问作者diff