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

1、事件回放 

今天工做时碰到了一个奇怪的问题，这个问题很早很早之前也碰到过，不过没想到过这么久了居然又栽在这里。 

当时正在联调一个项目，因为后端没有提供数据接口，因而我直接本地创建了一个 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，是须要引号的。

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

 

 

2、标准JSON格式 

虽然问题解决了，可是此次的经历让我有点劫后余生的感受，作了这么多年的前端，尽然连一个JSON都掌握不了？实在说不过去。

因而进入了JSON官网（http://json.org/json-zh.html），把那一屏半的内容好好的看了看。

都说细节是魔鬼，之前一直潜意识的就把Javascript对象看成JSON的我，此次真的好好补习了下JSON的知识。

有几个点能够和你们分享下

 

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

     这个就是我今天碰到的问题，就很少说了。

 

二、对象的value能够有如下几种值。

    

大致上和Javascript对象没区别。

可是这里要注意的一点是，没有undefined。

也就是说

{
    "success": undefined
}

这么一个JSON，是错误的。 

 

三、对于number类型，表示的方法以下 

 

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

 

3、一点感想 

回头看这个bug，真的是很是很是基础。原本解决完也就没事了，但此次却让我陷入了沉思。

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

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

 

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

其实以前我一直以为本身基础还挺好的，从11年入行以来，泡着蓝色理想论坛 ，HTML，CSS一步一步走过来，也算踏实。

 

又想起前不久阿当舌战群儒，争论关于前端基础和层出不穷的新技术问题。虽然不能说彻底承认他的观点，可是如今也挺能理解。

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

 

 

 

转载本站文章请注明做者和出处 哎呦大黄 – http://www.cnblogs.com/season-huang/ ，请勿用于任何商业用途