无法通过Django与JavaScript将数据发送至PostgreSQL数据库

我尝试用Ajax将correctAnswers数据通过Django存入PostgreSQL数据库，但出现错误且无Ajax响应，不知道问题出在哪，相关JavaScript代码如下：

function checkAnswers() {
  window.scrollTo(0, 0);
  var correctAnswers = 0;
  for (var i = 0; i < questions.length; i++) {
    var radios = document.getElementsByName("question" + (i + 1));
    var questionCol = document.getElementsByClassName("col-12")[i];
    var isCorrect = false;
    for (var j = 0; j < radios.length; j++) {
      if (radios[j].value == questions[i].correctAnswer && radios[j].checked) {
        correctAnswers++;
        isCorrect = true;
        break;
      }
    }
  document.getElementById("result").innerHTML =
    "คุณได้คะแนน " + correctAnswers + " / " + questions.length;
  var backButton = document.createElement("input");
  backButton.setAttribute("type", "button");
  backButton.setAttribute("value", "กลับไปหน้าหลัก");
  backButton.setAttribute("class", "btn btn-primary center1");
  backButton.setAttribute("onclick", "location.href='User-page.html'");
  document.getElementById("quizForm").appendChild(backButton);

  $.ajax({
    url: "/submit_quiz/",
    type: "POST",
    data: { correctAnswers: correctAnswers },
    success: function (response) {
      console.log("ส่งค่าไป data base สำเร็จ");
    },
  });
}

核心问题排查与修复 #

1. 前端语法错误（最紧急） #

外层遍历questions的for循环未闭合，导致后续代码（包括Ajax请求）被错误嵌套在循环内，甚至引发语法错误直接终止代码执行。
修复：给外层循环补上闭合括号，将结果渲染、按钮创建、Ajax请求的代码移到循环外：

function checkAnswers() {
  window.scrollTo(0, 0);
  var correctAnswers = 0;
  for (var i = 0; i < questions.length; i++) {
    var radios = document.getElementsByName("question" + (i + 1));
    var questionCol = document.getElementsByClassName("col-12")[i];
    var isCorrect = false;
    for (var j = 0; j < radios.length; j++) {
      if (radios[j].value == questions[i].correctAnswer && radios[j].checked) {
        correctAnswers++;
        isCorrect = true;
        break;
      }
    }
  } // 补上这行闭合括号
  // 以下代码移到循环外
  document.getElementById("result").innerHTML =
    "คุณได้คะแนน " + correctAnswers + " / " + questions.length;
  var backButton = document.createElement("input");
  backButton.setAttribute("type", "button");
  backButton.setAttribute("value", "กลับไปหน้าหลัก");
  backButton.setAttribute("class", "btn btn-primary center1");
  backButton.setAttribute("onclick", "location.href='User-page.html'");
  document.getElementById("quizForm").appendChild(backButton);

  $.ajax({
    url: "/submit_quiz/",
    type: "POST",
    data: { correctAnswers: correctAnswers },
    success: function (response) {
      console.log("ส่งค่าไป data base สำเร็จ");
    },
    error: function(xhr, status, err) {
      // 新增错误回调，打印错误信息
      console.log("请求失败:", status, err);
      console.log("响应内容:", xhr.responseText);
    }
  });
}

2. Django CSRF 令牌缺失 #

Django默认启用CSRF保护，POST请求必须携带CSRF令牌，否则会被服务器拒绝。
修复：

• 在HTML页面的<head>中添加CSRF令牌meta标签：

  <meta name="csrf-token" content="{{ csrf_token }}">
  

• 在Ajax请求中加入CSRF请求头：

  $.ajax({
    url: "/submit_quiz/",
    type: "POST",
    headers: { "X-CSRFToken": $('meta[name="csrf-token"]').attr('content') },
    data: { correctAnswers: correctAnswers },
    success: function (response) {
      console.log("ส่งค่าไป data base สำเร็จ");
    },
    error: function(xhr, status, err) {
      console.log("请求失败:", status, err);
      console.log("响应内容:", xhr.responseText);
    }
  });
  

3. 后端路由与视图配置问题 #

确保/submit_quiz/路由正确映射到处理视图，且视图正确处理POST请求并返回JSON响应：

• 路由配置（urls.py）：

  from django.urls import path
  from . import views
  
  urlpatterns = [
      # 其他路由
      path('submit_quiz/', views.submit_quiz, name='submit_quiz'),
  ]
  

• 视图函数（views.py）：

  from django.http import JsonResponse
  # 导入你的模型，比如 from .models import QuizResult
  
  def submit_quiz(request):
      if request.method == 'POST':
          try:
              correct_answers = int(request.POST.get('correctAnswers', 0))
              # 保存到数据库：QuizResult.objects.create(correct_answers=correct_answers)
              return JsonResponse({'status': 'success', 'msg': '数据已保存'})
          except Exception as e:
              return JsonResponse({'status': 'error', 'msg': str(e)}, status=500)
      return JsonResponse({'status': 'error', 'msg': '无效请求'}, status=400)
  

4. 数据库操作验证 #

检查模型字段类型与存入数据是否匹配（比如correct_answers应为IntegerField），同时确保数据库连接正常。视图中的try-except块可以捕获数据库操作异常，方便排查。

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