AJAX请求获正确字典响应但无法正常打印显示问题求助

核心问题分析 #

你遇到的undefined是因为后端返回的每个属性值都是单个值（非数组），但前端代码错误地使用了数组索引[0]、[1]来取值。另外alert(obj)显示[object Object]是JavaScript的正常行为——alert只能输出字符串，无法展示对象的具体结构。

具体修复步骤 #

1. 修正前端取值逻辑
   后端返回的datax里，last_ht_water等属性对应的是单个值（比如数值或字符串），不是数组，直接用obj[property]取值即可，去掉多余的数组索引：

   for (const property in obj) {
     tableHTML += "<tr><td>"
     tableHTML += `${property}</td>  <td>${obj[property]}</td>`
     tableHTML += "</td></tr>"
   }
   

   注：如果原项目中后端返回的是数组格式的值，要确认当前后端的last_hot_water等变量是否确实是单个值，再对应调整后端返回结构或前端取值逻辑。

2. 正确调试对象结构
   把alert(obj)换成console.log(obj)，打开浏览器开发者工具（F12）的Console面板，就能清晰看到对象的完整键值对结构：

   console.log(obj); // 替代alert(obj)
   

3. 修正AJAX配置的拼写错误
   AJAX中的datatype应该是dataType（大写T），修正后jQuery会自动帮你解析JSON，无需手动调用JSON.parse(data)：

   $.ajax({
     url:"{% url 'bill' %}",
     type:'POST',
     data:{'name':value, csrfmiddlewaretoken: '{{csrf_token}}'},
     dataType:'json' // 修正拼写
   }).done(function(data) {
     let obj = data; // 直接使用解析后的对象，无需JSON.parse
     console.log(obj);
     // ...后续渲染逻辑
   });
   

4. 避免全局变量污染
   原代码中obj = JSON.parse(data)未声明变量，会成为全局变量，建议加上let或var：

   let obj = JSON.parse(data);
   

可选：后端返回数组格式数据的调整 #

如果确实需要每个属性对应数组格式，要修改后端的变量结构，比如：

# 示例：让每个值变为数组
last_hot_water = [120, 150, 180] # 替换原单个数值
datax = {
    'last_ht_water': last_hot_water,
    'last_cold_water': [80, 90, 100],
    # 其他属性同理
}
return HttpResponse(simplejson.dumps(datax, default=str))

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