Angular 1.6.9无法在页面展示JSON数据问题求助

看起来你的问题核心是PHP返回的是双重转义后的JSON字符串（带\转义符的那种），而不是原生的JSON响应。Angular接收到的是字符串而非可直接操作的JS对象，自然没法在页面上绑定显示。下面分两种场景给你解决方案：

一、从根源修复：修正PHP的JSON输出（推荐） #

这是最规范的做法，确保PHP直接返回标准的JSON响应，不需要Angular额外处理。

错误原因 #

你的PHP代码大概率做了重复JSON编码（比如调用了两次json_encode()），或者手动添加了转义字符（比如addslashes()），导致最终输出的是转义后的字符串，而非原生JSON。

正确的PHP示例代码 #

<?php
// 1. 数据库连接与查询（根据你的实际配置调整）
$dbHost = 'localhost';
$dbUser = '你的数据库用户名';
$dbPass = '你的数据库密码';
$dbName = '你的数据库名';

$conn = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
if (!$conn) {
    die("数据库连接失败: " . mysqli_connect_error());
}

// 2. 查询数据
$query = "SELECT EmpName, EmpAddress, emp_email FROM 你的表名";
$result = mysqli_query($conn, $query);
$records = mysqli_fetch_all($result, MYSQLI_ASSOC);

// 3. 设置正确的响应头（告诉浏览器这是JSON数据）
header('Content-Type: application/json');
header('Cache-Control: no-cache, must-revalidate');

// 4. 直接输出一次JSON编码的结果，不要额外转义
echo json_encode(['records' => $records]);

// 关闭连接
mysqli_close($conn);
?>

关键注意点：

• 只调用一次json_encode()，不要对编码后的结果再做任何转义操作
• 必须设置Content-Type: application/json响应头，Angular会自动识别并解析为JS对象

二、临时方案：在Angular端手动解析转义字符串 #

如果暂时没法修改PHP代码，可以在Angular的请求回调里手动解析这个转义后的字符串：

Angular控制器代码示例 #

angular.module('myApp', [])
.controller('EmpController', function($scope, $http) {
    $http.get('你的PHP文件路径.php')
        .then(function(response) {
            // 因为返回的是转义后的字符串，先做一次JSON解析
            var rawData = JSON.parse(response.data);
            // 现在rawData就是包含records的对象了
            $scope.employees = rawData.records;
        })
        .catch(function(error) {
            console.error('请求或解析出错:', error);
        });
});

页面绑定代码 #

在HTML中用ng-repeat遍历数据：

<div ng-app="myApp" ng-controller="EmpController">
    <h3>员工列表</h3>
    <ul>
        <li ng-repeat="emp in employees">
            <strong>姓名:</strong> {{emp.EmpName}} <br>
            <strong>地址:</strong> {{emp.EmpAddress}} <br>
            <strong>邮箱:</strong> {{emp.emp_email}}
            <hr>
        </li>
    </ul>
</div>

三、排查验证步骤 #

1. 打开浏览器的开发者工具（F12），切换到Network面板
2. 刷新页面，找到你的PHP请求，查看响应内容：
   • 正常的JSON应该是类似{"records":[{"EmpName":"Justin",...}]}，没有多余的\转义符
   • 查看响应头的Content-Type是否为application/json

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