PHP中json_encode返回的数组值在AJAX接收时显示undefined如何解决

解决方案 #

1. 修正AJAX配置的属性名错误
   jQuery的ajax方法的响应类型配置项是大小写敏感的驼峰命名dataType，你代码中写成全小写的datatype，导致框架不会自动将返回的字符串解析为JSON对象，此时你拿到的data是纯字符串，访问total属性自然返回undefined。
2. 补充PHP端的响应头声明与输出控制
   如果未明确指定JSON响应头，部分环境下jQuery会误判响应内容类型，同时要避免JSON输出前有多余的空格、报错、HTML标签等内容污染JSON格式。

修正后的cart.php代码

<?php
// 明确声明JSON响应头，指定编码避免乱码
header('Content-Type: application/json; charset=utf-8');
$data = array();
$data['total'] = '10000';
$data['quantity'] = '10';
echo json_encode($data);
// 终止后续执行，避免多余输出破坏JSON结构
exit;
?>

修正后的AJAX代码

function view()
{
  $.ajax({  
    url: 'cart.php',
    type:'POST',
    data:{action:'total'},
    // 改为驼峰命名，T大写
    dataType:'json',
    success: function (data) {
        alert(data.total);
    }
  });
}

如果修改后仍然出现问题，可以在success回调中先打印返回内容排查：

success: function (data) {
  // 查看返回内容类型，若为字符串可手动解析
  console.log(typeof data, data);
  // 手动解析兼容方案
  if(typeof data === 'string') {
    data = JSON.parse(data);
  }
  alert(data.total);
}

内容的提问来源于stack exchange，提问作者Bithat Ch-Faiq