《走過的路 踩過的坑》--jQuery ajax dataType返回出錯問題及解決

1需求

目前在維護一個專案。接到一個需求是要在某個儲存動作之前增加一步校驗，如果校驗通過則可以進行儲存，否則返回錯誤提示並阻止儲存動作。

因為是寄存專案，儲存動作是通過js提交表單傳送請求動作，所以在不改變其業務邏輯的前提下，我選擇了在儲存之前使用jQuery ajax增加一個校驗方法。success回撥處從後端拿到一個JSON格式的響應，包含一個布林型別的flag。

demo如下：

function chkXXX(name){
	var result;
	
	$.ajax({
		type:"post",
		url:"chkXXX.do",
		dataType:"json",
		data: $("#add_form").serialize(),
		async:false,
		success:function(backdata){
			var r = jQuery.parseJSON(backdata);
			result = r;
			
		},
		error:function(xhr, status, e){
			alert(status);
		}
	});
	return result;
}

在三下五除二快速搞定上線後，隔天運維MM就接到反饋，告知此功能並沒有work。。。（我靠，不可能吧。寫過辣麼多類似的校驗，怎麼就你罷工了呢）

開始以為是瀏覽器相容性問題，因為遇到好多此種情況（比如有些情況在 win7 ie8可以，但在xp ie8 就不行），但是我在使用ie，chrome除錯以後發現都不正常，

這個時候開啟chrome的F12，報錯資訊提示 返回的flag 為null，但是我後端明明只返回true，false兩種情況，這個時候基本確定問題就出在前端了。

斷點debug，跟蹤到的resut 確實是null，非後臺JSON。看來問題就定位到：

var r = jQuery.parseJSON(backdata);

3原因

其實問題的根本原因還是在於自己對ajax原理的不熟悉。

這裡我忽略一個細節，就是我在設定請求屬性的時候，設定了：

dataType:"json",

var r = jQuery.parseJSON(backdata);

預期伺服器返回的資料型別。

如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊來智慧判斷，比如 XML MIME 型別就被識別為 XML。在 1.4 中，JSON 就會生成一個 JavaScript 物件，而 script 則 會執行這個指令碼。隨後伺服器端返回的資料會根據這個值解析後，傳遞給回撥函式。可用值:

"xml": 返回 XML 文件，可用 jQuery 處理。
"html": 返回純文字 HTML 資訊；包含的 script 標籤會在插入 dom 時執行。
"script": 返回純文字 JavaScript 程式碼。不會自動快取結果。除非設定了 "cache" 引數。注意：在遠端請求時(不在同一個域下)，所有 POST 請求都將轉為 GET 請求。（因為 將使用 DOM 的 script標籤來載入）
"json": 返回 JSON 資料 。
"jsonp": JSONP 格式。使用 JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式。
"text": 返回純文字字串

設定dataType以後，返回的資料型別就已經是JSON物件了，再使用jq轉換就出錯了。

4解決

既然知道原因了，就知道解決方案了

其一就是設定dataType屬性後，直接返回backdata；

其二則是不設施dataType，返回JSON格式的字串，然後手動轉換成JSON物件；

5總結

走過的路，踩過的坑。以後還需努力啊！