Django接收Ajax请求存储JSON数据时数据库存空值问题

我是编程新手，正在开发一个网站，用户需点击多个按钮选项回答问题。希望点击按钮时将选择的数据存入Django数据库，但目前点击按钮后，数据库中仅存入空字符串。相关代码如下：

views.py #

import json

from django.http import JsonResponse, HttpResponseRedirect
from django.shortcuts import render, redirect
from django.urls import reverse
from .models import JasonData
from .form import QuestionForm

# Create your views here.
def index(request):
    """The homepage for Stay_healthy"""
    return render(request, 'Stay_healthy/index.html')

def redirect_to_index(request):
    """The homepage for Stay_healthy"""
    return HttpResponseRedirect(reverse('index', args=None))

def json_data_store(request):
    if request.method == 'POST':
        # 处理AJAX请求
        if request.headers.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest':
            data = json.loads(request.body)
            form = QuestionForm(data)
            if form.is_valid():
                form.save()
                return JsonResponse({'status': 'success'})
            else:
                return JsonResponse({'status': 'error'})
        else:  # 处理非AJAX请求
            form = QuestionForm(request.POST)
            if form.is_valid():
                form.save()
                return redirect('index')
    else:
        form = QuestionForm()
    return render(request, 'Stay_healthy/question_detail.html', {'form': form})

def check_data(request):
    stored_data = JasonData.objects.all()
    return render(request, 'Stay_healthy/check_data.html', {'stored_data': stored_data})

models.py #

from django.db import models

# Create your models here.
class JasonData(models.Model):
    patient_data = models.JSONField(blank=True, null=True, default=dict)

form.py #

from django import forms
from .models import JasonData

class QuestionForm(forms.ModelForm):
    class Meta:
        model = JasonData
        fields = ['patient_data']

HTML文档 #

<!DOCTYPE html falls真诚保险箱ons
静态 put>
                  用时LinkEND建合>
{% extends "Stay_healthy/base.html"%}
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>age</title>
</head>
<body>
{% block content %}
<h1>Welcome let's find how care at Forward can meet your unique needs. What is your age?</h1>
<h2 class="highlight">looks like you are thriving motherfucker </h2>
<form action="{% url 'Stay_healthy:json_data_store' %}" method="post">
    {% csrf_token %}
  <div class="criteria">
    <button id="age1" type="button">18-29</button>
    <p></p>
    <button id="age2" type="button">30-39</button>
    <p></p>
    <button id="age3" type="button">40-49</button>
    <p></p>
    <button id="age4" type="button">50-59</button>
  </div>
</form>
<script src="{% static 'js/question_detail.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/question_detail.css' %}">
{% endblock content %}
</body>
</html>

JavaScript文件 #

// 获取CSRF Token
function getCookie(name) {
  var cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    var cookies = document.cookie.split(';');
    for(var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}

// 存储数据的AJAX逻辑
document.getElementById("age1").addEventListener("click", function () {
  var patient_choice = "18-28";
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/store-choice/", true);
  xhr.setRequestHeader("Content-Type", "application/application/json;charset UTF-8");
  
  // 携带CSRF Token
  var csrftoken = getCookie('csrftoken');
  xhr.setRequestHeader("X-CSRFToken", csrftoken);
  
  var jsonData = {"choice": patient_choice};
  xhr.send(JSON.stringify(jsonData));
  
  // 跳转首页
  window.location.href = "/index"
});

urls.py #

"""defines urls for stay_healthy"""
from django.urls import path
from . import views

app_name = 'Stay_healthy'
urlpatterns = [
    # 首页
    path('', views.index, name='index'),
    # 问题页面
    path('question_detail/', views.json_data_store, name='question_detail'),
    # 数据存储接口
    path('store-choice/', views.json_data_store, name='json_data_store'),
    # 查看存储的数据依空间 
 Judapor Jud(_ Jud�)
ocket法 dev.>
    path('check_data/', views.check_data, name='check_data')
]

问题修复步骤 #

1. 修正请求数据结构
   表单QuestionForm只识别patient_data字段，但前端发送的是{"choice": "xxx"}，导致字段不匹配。修改JS中的JSON结构：

   var jsonData = {"patient_data": {"age": patient_choice}};
   

2. 修复Content-Type设置错误
   JS里的Content-Type写错了，改为正确的格式：

   xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
   

3. 完善AJAX请求判断逻辑
   原代码通过HTTP_X_REQUESTED_WITH判断AJAX不够可靠，改用Content-Type判断更准确：

   # 替换原有的AJAX判断代码
   if request.content_type == 'application/json':
       data = json.loads(request.body)
       # 后续表单验证逻辑不变
   

4. 补充其他按钮的点击事件
   当前只有age1绑定了点击事件，需要给age2、age3、age4补充相同逻辑的事件监听：

   document.getElementById("age2").addEventListener("click", function () {
     var patient_choice = "30-39";
     // 复用age1的AJAX请求逻辑
   });
   

5. 添加调试用的错误输出
   在views.py的表单验证失败分支中打印错误信息，方便排查问题：

   else:
       print(form.errors)
       return JsonResponse({'status': 'error', 'errors': form.errors})
   

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