PHP使用PDO操作MySQL实现聊天功能时前端字段显示undefined问题

问题根源 #

出现undefined的核心原因是PDO查询返回的结果格式和前端预期不匹配：

• PHP中调用$items->fetch()时使用了PDO::FETCH_NUM参数，该参数会让返回的每条数据为数字索引数组，格式类似[0=>1,1=>'测试消息',2=>'用户名',3=>'2024-xx-xx']，没有字段名作为键。
• 但前端JS代码是按关联对象逻辑取值，通过item.id、item.name、item.message、item.created_on这些字段名读取数据，自然找不到对应值，全部返回undefined。

另外还有两个次要问题会影响运行稳定性：

1. CORS响应头拼写错误：header('Acces-Control-Allow-Origin: *'); 里的Acces少了字母s，跨域请求时可能触发报错。
2. 绑定start参数时用了PDO::PARAM_STR，但start是整数类型，使用PDO::PARAM_INT更符合规范。

解决方法 #

按以下步骤修改代码即可恢复正常：

1. 修改PDO的fetch参数 #

将原有代码

while($row = $items->fetch(PDO::FETCH_NUM, PDO::FETCH_ORI_NEXT)){

修改为

while($row = $items->fetch(PDO::FETCH_ASSOC, PDO::FETCH_ORI_NEXT)){

PDO::FETCH_ASSOC会返回关联数组，键名对应数据库的字段名，和前端的取值逻辑完全匹配。

2. 修正CORS头拼写 #

将原有代码

header('Acces-Control-Allow-Origin: *');

修改为

header('Access-Control-Allow-Origin: *');

3. （可选）修正start参数绑定类型 #

将原有代码

$items->bindParam(':start',$start,PDO::PARAM_STR);

修改为

$items->bindParam(':start',$start,PDO::PARAM_INT);

内容的提问来源于stack exchange，提问作者Ander Canales Medina