如何让jQuery解析有效JSON？Chrome下AJAX请求异常排查

我用jQuery/AJAX配合PHP后端实现Bootstrap标签页加载功能，Firefox中运行正常，但Chrome里某一个标签页请求报错，其余标签页使用相同JSON格式可正常工作。

后端PHP代码 #

$tabData = 
<<<HTML
<div class="table-responsive-md">
  <table class="table table-striped">
    <thead>
      $thead
    </thead>
    <tbody>
      $tbody
    </tbody>
  </table>
</div>
HTML;

$jsonData = ['success'=>true
            ,'showFlag'=>false
            ,'tabData'=> $tabData    
            ];     
echo json_encode($jsonData);

前端jQuery/AJAX代码 #

$.ajax({
  type: "POST",
  url: url,
  data: {'tab':datatab}, 
  beforeSend: function() {
    $loader.removeClass('d-none');
  },
  success: function(json) {
    json = jQuery.parseJSON(json);          
    if (json.success) {
      $wrapper.html(json.tabData);
      $this.tab('show');
      return false;
    } 
  },
  complete: function(){
    $loader.removeClass('d-block');
  } 
}) 

Chrome报错信息 #

Uncaught SyntaxError: Unexpected token '<', "<div class"... is not valid JSON
Failed to load response data: request content was evicted from inspector cache

排查解决建议 #

• 检查该标签页对应的PHP输出是否混入额外内容：比如$thead或$tbody生成时是否有PHP错误提示、多余的echo/print语句，或者PHP文件开头/结尾存在空白字符（比如<?php前或?>后的空格），这些都会污染JSON输出，Chrome对JSON格式校验比Firefox更严格。
• 强制设置PHP响应头为JSON类型：在echo json_encode($jsonData);之前添加header('Content-Type: application/json; charset=utf-8');，确保浏览器正确识别响应格式，避免解析错误。
• 移除前端的jQuery.parseJSON(json)：若后端正确设置Content-Type，jQuery会自动将响应解析为JSON对象，手动重复解析可能引发问题，直接使用回调参数json即可。
• 校验$thead/$tbody变量内容：确认是否包含未转义的特殊字符或语法错误（比如未闭合的HTML标签），虽然json_encode会处理转义，但变量本身的异常可能间接导致输出不符合JSON规范。
• 查看Chrome网络请求的实际响应：在开发者工具Network面板中找到该请求，查看Response标签的真实内容，确认是否为纯JSON，还是混入了HTML片段或错误信息。

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