解决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方式提交请求。