使用AJAX向Django视图POST数据无返回内容问题咨询

嘿，我看了你的代码，发现几个关键问题导致请求没返回预期数据，咱们一步步来梳理修复：

1. 核心问题：没写回调函数接收返回值 #

你的AJAX请求里完全没有success/done这类回调逻辑——就算后端正常返回了数据，前端也不知道该怎么处理，自然看不到任何结果。这是最直观的问题，先补上：

$.ajax({
  method: "POST",
  url: "http://127.0.0.1:8000/",
  contentType: 'application/json',
  data: JSON.stringify(data_s), // 先改回正确的JSON格式
  // 新增成功回调，打印返回数据
  success: function(response) {
    console.log("服务器返回内容：", response);
    // 这里可以把数据渲染到页面上
  },
  // 新增错误回调，排查问题
  error: function(xhr, status, err) {
    console.error("请求出错：", err);
  }
});

2. JSON请求的格式与后端解析不匹配 #

你设置了contentType: 'application/json'，但当前data传的是普通对象{'QQww': "1"}，这不符合JSON请求的要求——必须把数据转成JSON字符串。而且Django后端处理JSON请求时，不能用request.POST获取数据，得从request.body解析：

前端修正 #

把数据用JSON.stringify()包裹，也就是你之前注释掉的那行：

data: JSON.stringify(data_s),

后端Django视图修正 #

如果要接收JSON数据，视图得这么写：

import json
from django.http import JsonResponse

def home(request):
    if request.method == 'POST':
        # 解析JSON格式的请求体
        data = json.loads(request.body)
        goal_info = data.get('goal')
        # 这里可以写你的业务逻辑，比如保存到数据库
        # ...
        # 返回JSON格式的响应
        return JsonResponse({
            'status': 'success',
            'message': '目标已处理',
            'received_data': goal_info
        })
    # GET请求的处理逻辑
    return JsonResponse({'status': 'info', 'msg': '这是GET请求'})

3. CSRF令牌的传递更稳妥的方式 #

你已经获取了CSRF令牌，但发送JSON请求时，Django默认检查的是X-CSRFToken请求头，而不是表单字段。建议把令牌放到请求头里：

function PostGoal(){
 console.log('POSTGOAL!!!')
 const csrfToken = $('input[name="csrfmiddlewaretoken"]').val();
 const data_s = {
  'goal': { 'name':'gg','box':'sasa' }
 }
 $.ajax({
  method: "POST",
  url: "http://127.0.0.1:8000/",
  contentType: 'application/json',
  // 把CSRF令牌放到请求头
  headers: {
    'X-CSRFToken': csrfToken
  },
  data: JSON.stringify(data_s),
  success: function(res) {
    console.log("返回结果：", res);
  },
  error: function(err) {
    console.log("请求失败：", err);
  }
 });
}

4. URL的小优化 #

硬编码http://127.0.0.1:8000/在本地测试没问题，但部署到生产环境会失效。建议用Django模板标签生成URL：
比如在HTML模板里先定义全局变量：

<script>
const homeUrl = "{% url 'home' %}";
</script>
<script src="你的JS文件路径"></script>

然后在JS里用url: homeUrl,替代硬编码地址。

做完这些修改后，打开浏览器开发者工具（F12）的Network标签，查看请求的状态码、请求头和响应内容，能帮你快速确认问题是否解决。

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