一个粗心的Bug,JSON格式不规范导致AJAX错误

一、事件回放

今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里。

当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json 文件,然后把配置的URL指向这个json文件,文件内容大概如下 :

// account.json{
    success: true,
    data: [{
        id: "1",
        name: "张XX",
        job: "员工",
        type: 1
    }]
}

嗯,一个十分标准的Javascript对象。

然后,我的ajax代码大概如下:

function getRemoteData(url, param, success) {
    $.ajax({
        type: 'get',
        url: url,
        data: param,
        dataType: 'json',
        cache: false,
        success: function(result) {
            success(result);
        },
        error: function() {
            alert('网络错误,请重试');
        }
    });
}

然后,悲剧就开始了。

这段代码,一直走入error的回调

什么原因?我开始漫漫的排查之路。

一开始,我想是不是ajax代码写错了,仔细看了看,貌似没有什么问题。

然后,由于是我使用本地json文件导致的问题,所以一直觉得是本地文件这一块出的问题。

突然想到了貌似浏览器有个对于本地文件访问的安全限制,比如chrome就有这个限制,需要在启动的时候加上参数。

但是印象中这种情况控制台会有提示的,所以应该不是这种情况,

不过我还是死马当作活马医,试一试看看,给浏览器加上了启动参数

--allow-file-access-from-files

结果,确实没用。

打开浏览器的Network,排查,发现了一个奇怪现象

在preview里面看数据

我的那句 success: true 怎么会变成 undefined: true。这是什么鬼。。。于是思路转向了json文件方向。

然后又想,会不会是返回的数据不是json导致的?(其实这次已经接近正确答案了),

但是我看了看文件,并没有发现什么问题,

所以猜然道是浏览器把我的json文件当作文本文件,而我dataType写了json导致解析错误?(哭!!!感觉当时应该是脑抽了)

然后修改ajax代码

function getRemoteData(url, param, success) {
    $.ajax({
        type: 'get',
        url: url,
        data: param,
        dataType: 'text', // 改成了text
        cache: false,
        success: function(result) {
            success(eval('(' + result + ')')); // 使用eval解析了一下        },
        error: function() {
            alert('网络错误,请重试');
        }
    });
}

果然,运行成功了。

但是,这还是治标不治本啊,而且也不能 每次 切换接口的时候改代码吧。

然后,深吸一口气,决定好好静下来想想这个问题。

首先看了看自己以前的代码,发现也是这么写的,完全没问题。。

不信邪,,看了看同事的代码,写法不一样,但是大体上也是这样的,也没问题。

那到底是什么问题,崩溃啊!

一怒之下,打开stackoverflow,开始搜索

由于方向错误,一直搜索 ajax、local file、always error等等。。

我只能说当时我的内心是崩溃的,虽然在搜索的过程中,学到了好多别的知识(各种问题链接看来看去,最后竟然看到关于react的东西去了,时间就是这样流逝掉的。。。),但关键是我这个问题还是没有解决。

根据经验,往往最无厘头的问题原因往往是最简单的,心想这一定是一个很小的错误照成的,但是错误在哪里呢?

终于,功夫不负有心人,我找到了,因为那个json文件格式错了。。

在jQuery的api网站上看到了这么一句话

在 jQuery 1.4 中,JSON 格式的数据以严格的方式解析,如果格式有错误,jQuery都会被拒绝并抛出一个解析错误的异常。(见json.org的更多信息,正确的JSON格式。)

于是乎,我改了下文件

// account.json{    "success": true,    "date": [{        "id": "1",        "name": "张XX",        "job": "员工",        "type": 1
    }]
}

好吧,运行成功了。

不知道各位看到了文件的区别吗。标准的JSON,所有的key,是需要引号的。

就是这么一个小小的问题!

二、标准JSON格式

虽然问题解决了,但是这次的经历让我有点劫后余生的感觉,做了这么多年的前端,尽然连一个JSON都掌握不了?实在说不过去。

于是进入了JSON官网(http://json.org/json-zh.html),把那一屏半的内容好好的看了看。

都说细节是魔鬼,以前一直潜意识的就把Javascript对象当作JSON的我,这次真的好好补习了下JSON的知识。

有几个点可以和大家分享下

1、对象的key一定要用双引号。

这个就是我今天碰到的问题,就不多说了。

2、对象的value可以有以下几种值。

大体上和Javascript对象没区别。

但是这里要注意的一点是,没有undefined。

也就是说

{    "success": undefined
}

这么一个JSON,是错误的。

3、对于number类型,表示的方法如下

用科学计数法的时候会牵涉到。

三、一点感想

回头看这个bug,真的是非常非常基础。本来解决完也就没事了,但这次却让我陷入了沉思。

记得以前有人调侃过,是说前端分太细了,CSS和Javascript都分开,以后是不是要分一个JSON工程师啊。

虽然只是一句调侃,但是我想大部分前端对于JSON都抱着一种“哦,就是一个Javascript对象”这种态度,而没有去认真去看一看它的定义。

回想最近两年学习与接触的前端知识,各种工程化工具,各种MV*框架,前端应用架构模式等。而那些基础的东西确实很久没有关注了。

其实之前我一直觉得自己基础还挺好的,从11年入行以来,泡着蓝色理想论坛 ,HTML,CSS一步一步走过来,也算踏实。

又想起前不久阿当舌战群儒,争论关于前端基础和层出不穷的新技术问题。虽然不能说完全认可他的观点,但是现在也挺能理解。

是时候好好静下来,重拾那些前端最根本的东西了。

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2016-02-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏做全栈攻城狮

零基础开发高大上精美网站,非技术人员建站宝典 第一课

对于程序员,写代码是日常工作。作为他们眼中的电脑通,时常会有亲朋好友,找你给做个网站或者公众号。盛情难却。自己不得不搞。“子非鱼焉知鱼之乐”。按照要求去做,浪费...

35630
来自专栏IMWeb前端团队

聊聊http/2

本文作者:IMWeb 九月 原文出处:IMWeb社区 未经同意,禁止转载 随着web的发展,http/1.x 已经很难满足现在的需求,Google 因...

23270
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(二十一):讲师相关页面配置

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

20120
来自专栏花叔的专栏

实践并解读最新的小程序码生成方式

花叔一看到这个新特性时就开始着手研究这特性怎么应用,经过一轮测试,终于有点成绩,来看看花叔的研究成果,希望对大家有用。

44560
来自专栏iOS技术

设计一个简单的 iOS 架构前言一、关于组件化二、模块化思维划分文件三、减少全局宏的使用四、去基类化设计五、MVC?MVP?MVVM?VIPER?结语

正如“100个读者就有100个哈姆雷特”一样,对于架构的理解不同的软件工程师有不同的看法。架构设计往往是一个权衡的过程,每一个架构设计者都要考虑到各个因素,比如...

17830
来自专栏北京马哥教育

让弹幕文明一点的Python屏蔽功能小实验

突然想到一个视频里面弹幕被和谐的一满屏的*号觉得很有趣,然后就想用python来试试写写看,结果还真玩出了点效果,思路是首先你得有一个脏话存放的仓库好到时候检测...

32950
来自专栏草根专栏

.NET Core TDD 前传: 编写易于测试的代码 -- 缝

举个例子, 如果一辆汽车在产出后没完成测试, 那么没人敢去驾驶它. 代码也是一样的, 如果项目未能进行该做的测试, 那么客户就不敢去使用它, 即使使用了也会遇到...

12570
来自专栏喵了个咪的博客空间

phalapi-入门篇6(小技巧和浅谈API适用范围以及入门篇总结)

#phalapi-入门篇6(小技巧和浅谈API适用范围以及入门篇总结)# ? ##前言## 先在这里感谢phalapi框架创始人@dogstar,为我们提供了这...

37450
来自专栏沈唁志

你认为该怎么样学习PHP?PHP成长之路

31150
来自专栏QQ会员技术团队的专栏

vuejs+ts+webpack2框架的项目实践

没有什么框架是全能的,都有其适用场景。我们的最初的定位一定要围绕我们的业务来选择。

1.1K90

扫码关注云+社区

领取腾讯云代金券