Django中AJAX请求返回HTML页面而非JSON数据问题求助

你遇到的核心问题是：AJAX请求点赞接口时，视图没有返回预期的JSON数据，而是返回了渲染后的profile页面。这通常是因为视图逻辑没有正确识别AJAX请求的参数，或者请求本身没有正确传递必要的信息。以下是分步解决方法：

一、先排查请求参数传递问题 #

首先确认AJAX请求是否正确传递了post_id和请求URL：

1. 修改AJAX代码，增加调试日志 #

给AJAX代码添加调试输出，确认关键参数是否正确：

// 绑定按钮点击事件（确保按钮有统一的类名，比如like_button）
$(document).on('click', '.like_button', function(e) {
    e.preventDefault(); // 阻止默认表单提交，避免页面刷新
    const $btn = $(this);
    
    // 推荐用data属性传递post_id（比依赖按钮id更可靠）
    const post_id = $btn.data('post-id');
    console.log('传递的post_id:', post_id);
    
    const likeText = $.trim($btn.attr('name'));
    // 获取表单的action（如果按钮在表单内）
    const url = $btn.closest('form').attr('action');
    console.log('请求URL:', url);

    $.ajax({
        type: 'POST',
        url: url,
        data: {
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
            'post_id': post_id,
        },
        dataType: 'json', // 明确要求返回JSON，避免解析错误
        success: function(data){
            console.log('接口返回数据:', data);
            // 更新页面点赞数
            $(`.like_count${post_id}`).text(data.likes);
            // 切换按钮文本
            $btn.attr('name', likeText === 'Like' ? 'Unlike' : 'Like');
            $btn.text(likeText === 'Like' ? '取消点赞' : '点赞');
        },
        error: function(xhr, status, error){
            console.log('请求错误状态:', status);
            console.log('错误信息:', error);
            console.log('响应内容:', xhr.responseText);
        }
    });
});

2. 调整HTML按钮的属性 #

把post_id放在data-post-id属性中，避免和按钮id冲突：

<form action="{% url 'profile' %}" method="POST">
    {% csrf_token %}
    <button type="submit" class="like_button" 
            data-post-id="{{ post.id }}" 
            name="{% if request.user in post.likes.all %}Unlike{% else %}Like{% endif %}">
        {% if request.user in post.likes.all %}取消点赞{% else %}点赞{% endif %}
    </button>
    <span class="like_count{{ post.id }}">{{ post.likes.all.count }}</span>
</form>

二、修正视图逻辑，确保正确返回JSON #

视图需要确保：只要POST请求包含post_id，就处理点赞并返回JSON，不会走到渲染页面的分支。同时处理post不存在的异常：

from django.http import JsonResponse
from django.shortcuts import render, get_object_or_404
from .models import Post

def profile(request):
    if request.method == 'POST':
        post_id = request.POST.get('post_id')
        if post_id:
            # 用get_object_or_404处理post不存在的情况，直接返回404
            post = get_object_or_404(Post, id=post_id)
            # 处理点赞/取消点赞逻辑
            if request.user in post.likes.all():
                post.likes.remove(request.user)
            else:
                post.likes.add(request.user)
            # 返回最新点赞数
            return JsonResponse({'likes': post.likes.count()})
        # 没有post_id时返回错误提示
        return JsonResponse({'error': '缺少post_id参数'}, status=400)
    
    # GET请求时渲染个人主页
    context = {
        'posts': Post.objects.filter(author=request.user),
        # 其他页面所需的上下文数据
    }
    return render(request, "profile.html", context)

三、调试步骤 #

如果问题仍存在，按以下步骤排查：

1. 打开浏览器开发者工具（F12），切换到Console标签，查看post_id和请求URL是否正确。
2. 切换到Network标签，找到AJAX请求，查看：
   • 请求状态码是否为200
   • 响应内容是JSON还是HTML页面
3. 查看Django控制台输出，确认视图是否接收到post_id，以及是否有异常信息。

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