PHP返回JSON后JS遍历无输出，求进度条遍历优化方案

我来帮你排查下这个问题——控制台连日志都没输出，大概率是请求环节出了问题，或者遍历的层级没匹配上JSON结构，咱们一步步来解决：

第一步：先确认AJAX请求是否真的拿到了有效数据 #

很多时候遍历没反应，根本不是遍历的问题，而是请求失败或者拿到的不是JSON对象。你可以先在AJAX的回调里加基础日志，同时加上错误回调：

$.ajax({
  url: '你的PHP接口路径', // 比如 './get-progress.php'
  type: 'GET',
  dataType: 'json', // 强制指定返回类型为JSON，让jQuery自动解析
  success: function(response) {
    // 先打印整个返回数据，确认结构对不对
    console.log('完整返回数据:', response);
    // 再打印progress对象，看看有没有拿到目标数据
    console.log('进度数据:', response.progress);
  },
  error: function(xhr, status, err) {
    // 这个一定要加！请求失败时能看到原因
    console.error('请求出错:', status, err);
  }
});

如果这里都看不到日志，那说明请求根本没成功（比如PHP文件路径错了、服务器报错），先把请求问题解决再说。

第二步：针对你的JSON结构，用正确的方式遍历 #

你的JSON结构是外层包了一个progress对象，里面才是各个xxx_pc的键值对，所以不能直接遍历外层的response，得先拿到response.progress再遍历：

$.ajax({
  // 上面的配置不变...
  success: function(response) {
    // 遍历progress下的所有键值对
    $.each(response.progress, function(key, value) {
      // 这里终于能看到控制台日志了！
      console.log(`${key} 的进度是: ${value}%`);
      
      // 接下来可以对应到你的进度条元素，比如假设进度条的id是「key去掉_pc加_bar」，比如health_pc对应health_bar
      const progressBarId = key.replace('_pc', '_bar');
      $(`#${progressBarId}`).width(`${value}%`);
    });
  }
});

第三步：检查PHP端的JSON输出是否规范 #

PHP端如果没正确设置响应头，或者JSON编码出错，JS也没法正确解析：

<?php
// 先设置正确的响应头，告诉浏览器这是JSON数据
header('Content-Type: application/json; charset=utf-8');

$progressData = [
  'progress' => [
    'health_pc' => 100,
    'energy_pc' => 100,
    'awake_pc' => 100,
    'nerve_pc' => 100,
    'exp_pc' => 3
  ]
];

// 检查JSON编码是否成功，避免输出无效内容
$jsonOutput = json_encode($progressData);
if ($jsonOutput === false) {
  // 编码失败时输出错误信息，方便排查
  echo json_encode([
    'error' => 'JSON编码失败',
    'msg' => json_last_error_msg()
  ]);
  exit;
}

echo $jsonOutput;
?>

常见的坑点总结 #

1. 忘记设置响应头或dataType：PHP没加header('Content-Type: application/json')，或者JS没设dataType: 'json'，导致JS拿到的是字符串而不是JSON对象，遍历自然无效。
2. 遍历层级错误：直接遍历了外层的response，而不是response.progress，相当于遍历了一个只有progress一个属性的对象，当然看不到目标数据的日志。
3. 没加错误回调：请求失败时（比如PHP报错、路径错误），控制台完全没提示，误以为是遍历的问题。

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