Django中Ajax POST数据无法传递至后端问题排查

核心问题定位 #

你的Ajax请求里，feedback_choice的取值方式错误，导致传递的数据不符合后端预期；同时可以优化数据获取写法，避免选择器冗余。

具体修复步骤 #

1. 修正feedback_choice的取值方式
   你当前用.find(":selected").text()获取的是选项的显示文本（比如翻译后的本地化内容），但后端需要的是选项的value属性值（比如"Wrong Question"）。应该改用.val()直接获取下拉框的选中值：

   feedback_choice: $("#feedback_choice").val(),
   

2. 简化textarea的选择器
   原写法$("textarea#feedback").val()可简化为$("#feedback").val()，ID选择器本身具备唯一性，无需额外指定标签类型：

   feedback: $("#feedback").val(),
   

3. 验证csrf令牌的正确性
   确保csrftoken变量已正确获取，常规获取方式如下：

   const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
   

   若模板中未自动生成csrf令牌字段，需在模板内添加：

   {% csrf_token %}
   

4. 后端增加错误处理（可选但推荐）
   原视图未处理数据为空、Question不存在或用户未登录的情况，易触发500错误，建议添加异常捕获与参数校验：

   from django.http import JsonResponse
   from django.shortcuts import get_object_or_404
   
   def add_new_question_feedback(request, pk):
       if request.headers.get('x-requested-with') == 'XMLHttpRequest':
           if not request.user.is_authenticated:
               return JsonResponse({"error": "用户未登录"}, status=401)
           
           question = get_object_or_404(Question, id=pk)
           feedback_text = request.POST.get('feedback')
           feedback_choice = request.POST.get('feedback_choice')
           
           if not feedback_text or not feedback_choice:
               return JsonResponse({"error": "反馈内容和类型不能为空"}, status=400)
           
           feedback = QuestionFeedback(
               question=question, 
               user=request.user, 
               text=feedback_text, 
               feedback_choice=feedback_choice
           )
           feedback.save()
           feedback_data = serializers.serialize('json', [feedback])
           return JsonResponse(feedback_data, safe=False)
       return JsonResponse({"error": "非法请求"}, status=400)
   

修复后的完整Ajax代码 #

$("#addFeedback").on("click", function () {
    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    $.ajax({
        type: "POST",
        url: "/quiz/add_new_question_feedback/" + questionBtnId,
        data: {
            feedback_choice: $("#feedback_choice").val(),
            feedback: $("#feedback").val(),
            csrfmiddlewaretoken: csrftoken,
        },
        success: function (response) {
            $("#feedbackModal").modal("hide");
            handleAlerts(
                "success",
                gettext("New Question Feedback sent successfully!")
            );
        },
        error: function (error) {
            $("#feedbackModal").modal("hide");
            handleAlerts("danger", gettext("Oops, something went wrong!"));
        },
    });
});

额外调试建议 #

• 打开浏览器开发者工具（F12），切换到Network标签，点击提交按钮后查看对应的POST请求，检查Form Data里是否包含feedback和feedback_choice的正确值。
• 如果请求返回403错误，说明csrf令牌未正确传递，需确认令牌的获取方式是否正确。

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