在web開發(fā)中，前端和后端發(fā)生數(shù)據(jù)交換傳輸現(xiàn)在最常見的形式就是異步ajax交互，一般返回給js都是json，如何才是正確的返回呢？

前端代碼想要獲取JSON數(shù)據(jù)代碼如下：

$.get('/user-info.php', function(userInfo){

alert(userInfo);

alert(userInfo.name);

});

然后如果后端的user-info.php是這樣的代碼：

$userInfo = [

'id' => 1,

'name' => 'Jay'

];

echo json_encode($userInfo);

那么前端第一句alert出來的將會是一個JSON字符串，第2個alert將會顯示undefined

原因就是回調(diào)函數(shù)里的userInfo根本不是一個object，而是一個字符串，所以alert后就是原樣字符串顯示了，再alert(userInfo.name);的話，由于字符串沒有定義name屬性，所以得到的是一個undefined的結(jié)果值

為什么userInfo不是一個帶有id和name屬性的對象？因為PHP沒有發(fā)送http響應(yīng)頭聲明響應(yīng)的內(nèi)容是json

其實PHP代碼在echo之前補充這么一句就可以了：

header('Content-type:application/json;charset=utf-8');

首先在沒有這句代碼的時候，瀏覽器抓到的網(wǎng)絡(luò)請求顯示響應(yīng)頭是這樣的：

注意到Content-type部分是text/html;charset=utf-8了嗎？

而當(dāng)PHP執(zhí)行header('Content-type:application/json;charset=utf-8');的時候，就變成了application/json;charset=utf-8了

這就是HTTP報文響應(yīng)內(nèi)容的格式聲明，專業(yè)術(shù)語叫MIME類型

如果服務(wù)端說響應(yīng)的格式是text/html，那前端當(dāng)然認(rèn)為這并不是JSON，所以當(dāng)成HTML了，HTML其實就是一堆字符串嘛

所以在沒有發(fā)送json類型通知時，以下兩句話對于前端來說都是一樣的：

echo '{"id":1}';

//或者

echo '<div>html內(nèi)容。。。<div>';

有人說可是上面那句echo輸出的是一個JSON字符串啊，不應(yīng)該識別為JSON嗎？

那假設(shè)jQuery是你寫的，你怎么判斷第1個字符串是JSON字符串？這可是要費好多功夫的，你總不可能這么寫：

var content = xmlHttpRequest.responseText;

if(content.substr(0, 1) == '{'){

//是json

}

不然的話那后端返回{"id"這樣只有半截的內(nèi)容你也認(rèn)為是JSON啦？

其實人家判斷一個數(shù)據(jù)是不是JSON，是靠HTTP響應(yīng)的MIME類型來判斷的，這才是標(biāo)準(zhǔn)的做法，也是HTTP協(xié)議的內(nèi)容

其實如果PHP不發(fā)送header聲明MIME類型，只要將前端代碼換成這樣也能正常得到JSON：

$.ajax({

url : '/user-info.php',

dataType : 'json',

success : function(userInfo){

alert(userInfo);

alert(userInfo.name);

}

});

從jQuery的源代碼的ajaxConvert函數(shù)部分可以得知，當(dāng)使用了$.ajax方法后，與$.get和$.post不同的是它這里聲明了一個dataType的屬性為json

簡單地說jQuery就是按照json的邏輯來解析服務(wù)端響應(yīng)的內(nèi)容，才不管你服務(wù)端的MIME類型是什么

但這只是前端的考量，其實首先服務(wù)端的做法就不標(biāo)準(zhǔn)，既對外聲明接口輸出的是JSON數(shù)據(jù)，卻又沒聲明對應(yīng)的MIME類型

作為追求優(yōu)秀的人，我們應(yīng)該按照對應(yīng)的類型補充對應(yīng)的MIME類型報頭輸出才對，輸出JSON的接口總該執(zhí)行一下

header('Content-type:application/json;charset=utf-8');