欧美经典成人在观看线视频_嫩草成人影院_国产在线精品一区二区中文_国产欧美日韩综合二区三区

ajax前后臺(tái)傳json實(shí)例(web后端正確的返回JSON)

ajax前后臺(tái)傳json實(shí)例(web后端正確的返回JSON)

肇昂杰 2025-04-12 科技 23 次瀏覽 0個(gè)評(píng)論

在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出來的將會(huì)是一個(gè)JSON字符串,第2個(gè)alert將會(huì)顯示undefined

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

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

其實(shí)PHP代碼在echo之前補(bǔ)充這么一句就可以了:

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

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

web后端正確的返回JSON

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

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

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

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

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

echo '{"id":1}';

//或者

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

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

那假設(shè)jQuery是你寫的,你怎么判斷第1個(gè)字符串是JSON字符串?這可是要費(fèi)好多功夫的,你總不可能這么寫:

var content = xmlHttpRequest.responseText;

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

//是json

}

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

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

其實(shí)如果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不同的是它這里聲明了一個(gè)dataType的屬性為json

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

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

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

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

轉(zhuǎn)載請(qǐng)注明來自夕逆IT,本文標(biāo)題:《ajax前后臺(tái)傳json實(shí)例(web后端正確的返回JSON)》

每一天,每一秒,你所做的決定都會(huì)改變你的人生!

發(fā)表評(píng)論

快捷回復(fù):

評(píng)論列表 (暫無評(píng)論,23人圍觀)參與討論

還沒有評(píng)論,來說兩句吧...