AngularJS AJAX无法获取含HTML标签的JSON值，报$http:baddata错误

这个$http:baddata错误我之前帮不少开发者处理过，本质就是Angular没法把后端返回的内容解析成合法JSON——从你给出的错误编码内容能看到，开头有换行符（%0D%0A），内容还被截断了，说明返回的响应里混了非JSON的东西，比如多余的空白、HTML标签，甚至是后端报错时输出的HTML错误页面。

下面是具体的解决步骤：

• 第一步：确认后端返回的原始内容
  直接用浏览器访问你的API接口地址，或者用Postman这类工具查看响应的原始内容。重点检查：

  • 开头有没有多余的换行、空格；
  • 内容里有没有HTML标签（比如<div>、<p>或者后端报错的堆栈信息）；
  • 响应头的Content-Type是不是application/json。

• 第二步：修复后端输出（最根本的解决办法）
  如果后端是PHP这类语言，要确保输出JSON的代码是“干净”的：

  1. 确保在输出JSON之前，没有任何额外的echo、print语句，甚至是PHP文件开头<?php标签之前的空白字符；
  2. 先设置正确的响应头，再输出JSON，最后终止脚本避免后续输出：

     header('Content-Type: application/json');
     // 假设$records是你要返回的数据数组
     echo json_encode(['records' => $records]);
     exit; // 或者die()，防止后续输出HTML内容
     

  如果是其他后端语言，核心逻辑一致：只输出纯JSON，设置正确的Content-Type，避免任何额外输出。

• 第三步：前端临时兼容（如果后端暂时没法修改）
  要是后端一时没法调整，你可以在Angular的请求里先把响应当成文本接收，手动清理掉非JSON内容后再解析：

  $http.get('/your-api-endpoint', {responseType: 'text'})
    .then(function(response) {
      // 1. 去掉开头的多余换行/空白
      var cleanedContent = response.data.replace(/^[\r\n\s]+/, '');
      // 2. 移除所有HTML标签（如果有的话）
      cleanedContent = cleanedContent.replace(/<[^>]+>/g, '');
      // 3. 手动解析JSON
      try {
        var parsedData = JSON.parse(cleanedContent);
        // 这里处理你的业务逻辑，比如把数据绑定到视图
        console.log('解析后的数据:', parsedData);
      } catch (parseError) {
        console.error('JSON解析失败:', parseError);
      }
    })
    .catch(function(error) {
      console.error('请求出错:', error);
    });
  

• 第四步：检查服务器错误页面
  如果后端代码报错，服务器可能会返回500状态码和HTML错误页面，而不是JSON。这时候要在$http的错误回调里检查响应状态码和内容，排查后端的具体错误。

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