PHP+AngularJS项目HTML表格不显示数据，新手求助排查

嘿，作为刚入坑PHP和AngularJS的新手，遇到这种表格不加载数据的情况太正常啦！咱们一步步拆解问题，总能找到根源：

先从后端接口入手（毕竟第一个教程能跑，大概率是新接口的小问题） #

直接在浏览器地址栏敲你的read.php完整URL，看看能不能返回格式标准的JSON数据：

• 如果页面空白/报PHP错误：
  • 核对db.php里的数据库连接信息（主机、账号、密码、库名），和第一个能跑的项目完全一致吗？别拼错字母哦
  • 检查department.php里的读取逻辑：SQL语句的表名、字段名是不是和数据库里的对应？有没有漏写分号或者引号？
  • 看看read.php有没有多余的输出（比如调试用的echo语句），JSON格式容不得半点儿多余字符，哪怕是个空格都可能导致解析失败
• 如果能拿到正常的JSON数组，那问题就出在前端AngularJS部分啦

检查前端服务层（你说的departmentServices.php应该是departmentServices.js吧？笔误啦😉） #

• 确认服务里的API请求路径是不是指向了正确的read.php地址，比如本地开发是不是/your-project/read.php，别写错路径
• 检查$http请求的方法对不对，读取数据应该用GET，有没有设置正确的请求头？比如：

  $http.get('/read.php', {headers: {'Content-Type': 'application/json'}})
  

再看控制器（departmentController.js） #

• 先确认控制器有没有正确注入对应的服务，比如依赖数组里是不是加了服务的名称？
• 调用服务的读取方法后，有没有把返回的数据赋值给作用域变量？比如是不是写了$scope.departments = response.data;？
• 偷偷加个console.log(response.data)在控制器里，然后按F12打开浏览器控制台，看看能不能打印出数据库里的数据：
  • 没打印？说明请求根本没发出去，或者服务的逻辑有问题
  • 打印出数据了？那就是HTML视图的问题啦

最后检查HTML表格视图 #

• 核对ng-repeat指令是不是写对了，比如是不是ng-repeat="dept in departments"，变量名和控制器里的要完全一致哦
• 表格里绑定的字段名要和后端返回的JSON字段名完全匹配，大小写都不能错！比如后端返回dept_name，视图里就不能写成departmentName
• 打开浏览器开发者工具的Elements面板，看看表格有没有生成对应的<tr>标签：
  • 没生成？说明ng-repeat没生效，作用域变量没正确赋值
  • 生成了但内容空？肯定是字段名不匹配

额外小技巧：看Network面板抓请求 #

按F12打开Network面板，刷新页面后找read.php的请求：

• 状态码404：路径写错了，赶紧改地址
• 状态码500：后端代码报错，去看PHP的错误日志或者直接在read.php开头加error_reporting(E_ALL); ini_set('display_errors', 1);看报错信息
• 状态码200但Response是空的：后端没查到数据，检查SQL语句
• 出现OPTIONS请求：跨域问题！在read.php开头加这两行代码：

  header("Access-Control-Allow-Origin: *");
  header("Content-Type: application/json; charset=UTF-8");
  

先按这些步骤排查一遍，把每一步的结果理清楚，很快就能找到问题啦！

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