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

時間 2019-12-06

標籤解決 jquery jsonp 格式請求 parsererror 錯誤欄目 JQuery 简体版

原文原文鏈接

在vs中建立一個空的mvc項目，在Controllers文件夾中添加一個控制器CommonController，並在該控制器下添加一個action用於獲取服務器時間，代碼以下：javascript

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:31187css

另外新建一個頁面jsonp.html，能夠是在本項目中，也能夠是在其它地方（爲了模擬跨域，最好不要在本項目中）。頁面代碼以下：html

<html>
<head>
	<title></title>
	<style type="text/css"></style>
	<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
	<script type="text/javascript">
		$(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);
                }
            });
        });
	</script>
</head>
<body>

</body>
</html>

而後打開jsonp.html這個頁面，咱們就會獲得當前服務器的時間，以下圖：java

這是正確的寫法，可以獲得數據。但咱們在實際用的時候常常會因爲這樣或那樣的緣由致使沒法成功獲得數據，比較常常碰到的錯誤就是parsererror。parsererror的意思是解析錯誤，出現這個錯誤的時候，通常都是服務器有數據返回，可是這個數據沒法被解析爲json對象。也就是說服務器返回的json格式字符串有問題。這個問題通常是因爲本身在寫json返回串時的失誤形成的，比方說一些逗號和引號。若是把返回串改爲以下寫法：jquery

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

再來打開jsonp.html頁面，就會獲得以下結果：
ajax

這說明咱們json對象的字段值須要使用引號包起來，字段名上的引號可要可不要，最好是加上。chrome

若是getServerTime這個action沒有參數callback，以下：json

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對象的字符串做爲參數，這樣才能正常解析。c#

還有一個比較常見的錯誤是在寫js的時候發生的，不少人在寫跨域請求時使用的是post方式，這個是不對的，jsonp格式的請求只能使用get方式提交。使用post方式頗有可能也會形成parsererror的錯誤，但也有可能會正常獲取數據。會產生parsererror錯誤的狀況是發起請求的頁面和要請求的資源是在同一個項目中，而正常獲取數據的頁面是在別的域名下發起的請求。但這卻並不能說明jsonp可使用post方式提交，打開chrome瀏覽器調試頁面下的Network，以下圖：跨域

咱們會神奇的發現，儘管在發起請求時，咱們規定了使用post方式提交，但瀏覽器在實際提交的時候使用的倒是get方式。這說明jquery在發起跨域請求時，會做一個內部處理，讓請求只能以get方式提交。因此在使用jquery的jsonp格式進行跨域請求時，咱們最好都使用get方式提交請求。