天天看點

html中jsonp錯誤,解決jquery中jsonp格式跨域請求報parsererror的錯誤

在vs中建立一個空的mvc項目,在Controllers檔案夾中添加一個控制器CommonController,并在該控制器下添加一個action用于擷取伺服器時間,代碼如下:

public ActionResult getServerTime(string callback)

{

string jsonp = "'serverTime':'{0}'";

DateTime curTime = DateTime.Now;

jsonp = string.Format(jsonp, curTime.ToString("yyyy/MM/dd HH:mm:ss"));

return Content(callback + "({" + jsonp + "})");

}

然後把這個項目運作起來。我這裡得到的域名是http://localhost:31187

另外建立一個頁面jsonp.html,可以是在本項目中,也可以是在其它地方(為了模拟跨域,最好不要在本項目中)。頁面代碼如下:

$(function() {

$.ajax({

url: "http://localhost:31187/common/getServerTime",

type: "get",

data: { callback: "?"},

dataType: "jsonp",

success: function(data) {

var curTime = data.serverTime;

alert(curTime);

},

error: function(a, b, c) {

alert(b);

}

});

});

然後打開jsonp.html這個頁面,我們就會得到目前伺服器的時間,如下圖:

html中jsonp錯誤,解決jquery中jsonp格式跨域請求報parsererror的錯誤

這是正确的寫法,能夠得到資料。但我們在實際用的時候經常會由于這樣或那樣的原因導緻無法成功得到資料,比較經常碰到的錯誤就是parsererror。parsererror的意思是解析錯誤,出現這個錯誤的時候,一般都是伺服器有資料傳回,但是這個資料無法被解析為json對象。也就是說伺服器傳回的json格式字元串有問題。這個問題一般是由于自己在寫json傳回串時的失誤造成的,比方說一些逗号和引号。如果把傳回串改成如下寫法:

string jsonp = "'serverTime':{0}";

再來打開jsonp.html頁面,就會得到如下結果:

html中jsonp錯誤,解決jquery中jsonp格式跨域請求報parsererror的錯誤

這說明我們json對象的字段值需要使用引号包起來,字段名上的引号可要可不要,最好是加上。

如果getServerTime這個action沒有參數callback,如下:

public ActionResult getServerTime()

{

string jsonp = "'serverTime':'{0}'";

DateTime curTime = DateTime.Now;

jsonp = string.Format(jsonp, curTime.ToString("yyyy/MM/dd HH:mm:ss"));

return Content(jsonp);

}

再運作jsonp.html頁面,那麼我們同樣會得到parsererror這個錯誤。因為這個callback是jquery在進行跨域請求時生成的一個回調函數名,當頁面取得伺服器傳回的值時,會由該回調函數解析成json對象。是以在傳回資料時應該把對整個回調函數的調用進行傳回,這個函數需要一個json對象的字元串作為參數,這樣才能正常解析。

還有一個比較常見的錯誤是在寫js的時候發生的,很多人在寫跨域請求時使用的是post方式,這個是不對的,jsonp格式的請求隻能使用get方式送出。使用post方式很有可能也會造成parsererror的錯誤,但也有可能會正常擷取資料。會産生parsererror錯誤的情況是發起請求的頁面和要請求的資源是在同一個項目中,而正常擷取資料的頁面是在别的域名下發起的請求。但這卻并不能說明jsonp可以使用post方式送出,打開chrome浏覽器調試頁面下的Network,如下圖:

html中jsonp錯誤,解決jquery中jsonp格式跨域請求報parsererror的錯誤

我們會神奇的發現,盡管在發起請求時,我們規定了使用post方式送出,但浏覽器在實際送出的時候使用的卻是get方式。這說明jquery在發起跨域請求時,會作一個内部處理,讓請求隻能以get方式送出。是以在使用jquery的jsonp格式進行跨域請求時,我們最好都使用get方式送出請求。