JavaScript Ajax请求无法触发success回调，Django后端调试求助

相关代码 #

前端HTML按钮 #

<button type="submit" id="post-form" class="btn btn-primary" onclick="send()">Send</button>

前端JavaScript send函数 #

function send() {
    $.ajax({
        type: 'POST',
        url: "http://app.localhost/feedback",
        dataType: "json",
        data : {
            feedback: $('#feedback').val(),
            email: $('#email').val(),
        },
        success : function(json) {
            $('Backdrop').hide();
            console.log("requested access complete");
        }
    });
}

Django视图处理函数 #

@csrf_exempt
def feedback(request):
    if request.method == 'POST':
        body_unicode = request.body.decode('utf-8')
        body = json.loads(body_unicode)
        fromField = body['email']
        subject = 'New FeedBack from {}'.format(fromField)
        body = body['feedback']
        sendEmail("ex@ex.co", subject, body,
                  replyTo=['ex@ex.co', 'ex.ex@gmail.com'])

    return redirect('/')

问题原因分析 #

1. 响应格式不匹配
   Ajax请求明确指定了dataType: "json"，要求后端返回JSON格式数据，但Django视图最后返回的是redirect('/')，这会返回302跳转的HTML内容。jQuery解析非JSON响应时会直接触发error回调而非success，但你没配置错误处理，所以看起来请求“失效”。

2. submit按钮默认行为干扰
   按钮类型是type="submit"，点击时会触发所在表单的默认提交动作，页面会立即刷新，导致Ajax请求还没完成就被中断。

3. 缺少错误排查入口
   没有设置error回调，无法在浏览器控制台查看请求失败的具体原因（比如响应解析错误、请求被中断等）。

修复方案 #

1. 修改Django视图返回JSON响应 #

把跳转返回改成符合要求的JSON响应：

from django.http import JsonResponse

@csrf_exempt
def feedback(request):
    if request.method == 'POST':
        body_unicode = request.body.decode('utf-8')
        body = json.loads(body_unicode)
        fromField = body['email']
        subject = 'New FeedBack from {}'.format(fromField)
        body_content = body['feedback']  # 避免变量名重复覆盖原始请求体
        sendEmail("ex@ex.co", subject, body_content,
                  replyTo=['ex@ex.co', 'ex.ex@gmail.com'])
        # 返回成功状态的JSON
        return JsonResponse({"status": "success"})
    # 非POST请求返回错误状态
    return JsonResponse({"status": "invalid method"}, status=400)

2. 阻止submit按钮的默认提交行为 #

两种可选方式：

• 直接修改按钮类型：

<button type="button" id="post-form" class="btn btn-primary" onclick="send()">Send</button>

• 保留submit类型，在函数中阻止默认动作：

function send(e) {
    e.preventDefault(); // 阻止表单默认提交
    $.ajax({
        type: 'POST',
        url: "http://app.localhost/feedback",
        dataType: "json",
        data : {
            feedback: $('#feedback').val(),
            email: $('#email').val(),
        },
        success : function(json) {
            $('Backdrop').hide();
            console.log("requested access complete");
        },
        // 添加错误回调用于排查
        error: function(xhr, status, error) {
            console.log("请求失败:", status, error);
            console.log("响应内容:", xhr.responseText);
        }
    });
}

同时修改按钮的onclick传递事件参数：

<button type="submit" id="post-form" class="btn btn-primary" onclick="send(event)">Send</button>

3. 新增错误回调辅助排查 #

上面的代码已经添加了error回调，后续遇到类似问题可以直接在控制台查看具体错误信息，定位问题更高效。

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