Django实现文章点赞功能时Ajax无报错无任何响应问题解决

核心问题 #

你的AJAX请求使用了相对路径，浏览器会将相对路径拼接到当前页面URL后，而不是直接拼接到域名后：你当前访问的文章详情页路径是/article/[文章ID]/，填写的url: "like-article-commm"会被拼接为/article/[文章ID]/like-article-commm，和你在urls.py中配置的/like_article/路径完全不匹配，请求直接404，所以没有任何反应。

其他需修复的问题 #

• 视图中查询集使用错误：existing_like = like_object_list.filter()返回的是查询集对象，不能直接读取属性，需要改为取单个对象
• 视图逻辑缺失分支：未对已有点赞记录的情况做分支判断，修改已有记录后仍会重复新建点赞对象
• JS布尔值写法错误：JS原生布尔值为小写true，大写True会被识别为未定义变量，可能导致传参异常

完整修改代码 #

前端AJAX部分 #

$('#like-button').click(function(){ 
    var article_id = '{{ article.id }}';
    var user_id = '{{ user.id }}';
    var like_dislike = true;

    $.ajax({ 
        type:"GET",
        // 方式1：使用Django模板标签动态生成路径，后续修改路由也不需要改JS
        url: "{% url 'like-article-commm' %}",
        // 方式2：直接写绝对路径，前面加/表示从根路径开始
        // url: "/like_article/",
        data:{ 
            article_id: article_id,
            user_id: user_id,
            like_dislike: like_dislike
        }, 
        success: function( data ) { 
            $('#like-button').css('color', 'blue'); 
        },
        // 新增错误回调，后续排错可以直接看控制台输出
        error: function(xhr) {
            console.log('请求错误：', xhr.responseText);
        }
    }) 
});

后端视图部分 #

def Like_Article_View(request):
    if request.method == 'GET':
        article_id = int(request.GET['article_id'])
        likedarticle = Article.objects.get(id = article_id)
        
        user_liked_id = int(request.GET['user_id'])
        userliked = User.objects.get(id = user_liked_id)

        like_dislike_0 = request.GET['like_dislike']
        like_object_list = Like_Article.objects.filter(article_liked = likedarticle, user_liked = userliked)

        if like_object_list.exists():
            existing_like = like_object_list.first()
            if existing_like.like_dislike == like_dislike_0:
                return HttpResponse('success')
            existing_like.like_dislike = like_dislike_0
            existing_like.save()
        else:
            # 只有没有历史点赞记录时才新建对象
            like_new_object= Like_Article(article_liked=likedarticle, user_liked=userliked, like_dislike=like_dislike_0)
            like_new_object.save()

        return HttpResponse('success')
    else:
        return HttpResponse("unsuccesful")

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