一個粗心的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/ ，請勿用於任何商業用途