php抓取网页json数据(前端工程师数据中的tab字符背景解析及解析操作方法 )

　　php抓取网页json数据(前端工程师数据中的tab字符背景解析及解析操作方法

)

　　前端工程师对 JSON 太熟悉了。语法简单，表现力强，常用于前后端的数据交换。

　　实战中，我也遇到过JSON相关的小坑。

　　JSON 数据中的制表符

　　背景

　　有一天，在手机版的商品详情页发现了一个隐藏的bug。在 iOS 5 下不会触发，但在 Chrome、Firefox 和 iOS 6+ 的最新版本下可以重现。失败表现为各个详细信息页面的脚本将挂起并且无法工作。

　　分析

　　经过简单的隔离分析，可疑点位于某个JSON的解析操作中。这个页面的脚本使用了浏览器原生的JSON解析方法JSON.parse()，但是奇怪的是，这个方法偶尔会抛出异常，导致后续代码执行失败。（如下图）

　　进一步分析发现，iOS 6（和其他较新的浏览器）比 iOS 5 更严格地遵守 JSON 规范——如果 JSON 数据中需要制表符，则必须对其进行转义（“\t”或“\u0009”）；如果直接出现，则认为是非法字符，JSON.parse()方法会报错。

　　（可以在此处找到相关讨论，其中提到了 JSON 规范 RFC4627。）

　　跟进

　　制表符如何出现在 JSON 数据中？

　　原来，详情页使用这个JSON作为载体，将后端数据传递给前端脚本；这个JSON是用PHP代码手动拼接的，其中一个字段是直接从数据库中读取输出的。操作学生从Excel导入数据到数据库时，很可能在数据中不小心混入了一些制表符。

　　因此，这也是一个教训。对于那些人工生成的字符数据，仍然需要进行一定的过滤和验证。在这种情况下，更好的方法是先将数据存储在 PHP 数组中，然后使用 json_encode() 将其编码为 JSON 字符串，以确保 JSON 数据的正常性。

　　JSON 键名中的空格

　　背景

　　一天，一位后端同学声称自己按照要求开发了一个API。好的，在浏览器中运行，打开Firebug，看到Ajax返回的JSON数据，看起来还可以。

　　但是在渲染这段数据的时候，发现thumbnail字段不能一直输出正确的值，一直显示undefined。是拼写错误吗？我从 Firebug 的 JSON 视图（上图）复制并粘贴，但仍然出现错误。多么奇怪！

　　分析

　　如果在格式化的 JSON 视图中看不到问题，让我们进一步追踪原创数据。于是将Ajax返回数据切换到原代码视图，搜索缩略图关键字，终于找到问题所在。

　　原来这个字段的键名末尾有一个空格。空格也是键名的一部分，当然不能再输出这个有尾字段了。

　　后台大哥，你在玩我吗？

　　希望这篇文章可以帮到你！

　　点赞+转发，让更多人看到此内容

　　关注 {me} 并享受 文章 发布体验！

　　每周专注于克服一个前端技术难题。更多精彩前端内容私信我回复“教程”

　　原文链接：