如何通过PHP将MySQL数据获取到AngularJS页面？求助排查问题

我之前也碰到过类似的情况——后端接口明明能返回数据，但前端就是拿不到。结合你给出的信息，咱们一步步来排查，再给你几个替代方案：

先看你贴的代码片段 #

你给出的页面代码片段里ng-repeat没写完，这大概率是个问题，但先从常见的坑开始排查：

一、AngularJS代码的常见错误排查 #

• ng-repeat语法是否完整：正确的写法应该是 <tr ng-repeat="item in yourDataList">，要确保循环的变量名和控制器里赋值的变量完全一致，比如控制器里把数据存在$scope.userList，那ng-repeat就要写="user in userList"。
• 模块和控制器是否正确定义：你有没有在页面里写对应的JS代码？比如：

  // 一定要确保模块名和ng-app="myapp"一致
  var app = angular.module('myapp', []);
  // 控制器名要和ng-controller="myctrl"匹配
  app.controller('myctrl', function($scope, $http) {
      // 这里发起请求到你的PHP接口
      $http.get('your_api.php')
          .then(function(res) {
              // 把返回的数据绑定到$scope上，这样页面才能拿到
              $scope.yourDataList = res.data;
          }, function(err) {
              // 重点！这里一定要打印错误，看控制台
              console.log('请求出错：', err);
          });
  });
  

  很多时候就是模块/控制器名称拼写错了，或者没把数据赋值到$scope上。
• 打开浏览器控制台看报错：按F12打开开发者工具，先看Console标签页有没有红色报错（比如变量未定义、语法错误），再看Network标签页，找到请求PHP的那条记录，看状态码是不是200，响应内容是不是正确的JSON。这是最快定位问题的方法！

二、PHP接口的格式问题 #

• 确保返回标准JSON：AngularJS的$http默认会解析JSON，但如果PHP返回的不是纯JSON就会失败。PHP代码要这么写：

  // 查询数据库后，把结果转成关联数组
  $result = $conn->query("SELECT * FROM your_table");
  $data = $result->fetch_all(MYSQLI_ASSOC);
  
  // 一定要设置响应头为JSON格式
  header('Content-Type: application/json');
  // 输出JSON，不要加任何多余的内容（比如echo "查询成功"这种调试语句）
  echo json_encode($data);
  // 输出后直接退出，避免输出其他内容
  exit;
  

  你可以直接在浏览器地址栏访问PHP文件，看返回的是不是干净的JSON字符串，不能有任何HTML标签或者多余字符。

三、跨域问题（如果前端和后端不在同一域名/端口） #

• 如果你的前端是用本地文件打开（比如file:///C:/xxx.html），而PHP在http://localhost上，这就会有跨域问题。解决办法：
  • 把前端文件放到服务器的目录里，和PHP同域名访问；
  • 在PHP开头加跨域头（开发环境可以这么用，生产环境要指定具体域名）：

    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST");
    

四、替代方案：如果AngularJS 1.x不好用，试试这些方法 #

如果不想用AngularJS，也可以用更简单的方式实现：

• 原生JS Fetch API：不需要任何框架，直接请求数据并生成表格：

  window.onload = function() {
      fetch('your_api.php')
          .then(res => res.json())
          .then(data => {
              const table = document.querySelector('table');
              // 循环数据生成表格行
              data.forEach(item => {
                  const row = document.createElement('tr');
                  // 替换成你的字段名
                  row.innerHTML = `<td>${item.id}</td><td>${item.name}</td>`;
                  table.appendChild(row);
              });
          })
          .catch(err => console.log('出错了：', err));
  };
  

• Axios库：比原生Fetch更易用，支持更多功能：

  <!-- 先引入Axios -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
      axios.get('your_api.php')
          .then(res => {
              // 处理数据生成表格，逻辑和上面类似
              const data = res.data;
              // ...
          })
          .catch(err => console.error(err));
  </script>
  

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