文档章节

解决jquery中jsonp格式跨域请求报parsererror的错误

挨踢旅行者
 挨踢旅行者
发布于 2015/01/11 13:11
字数 961
阅读 1041
收藏 0

在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,可以是在本项目中,也可以是在其它地方(为了模拟跨域,最好不要在本项目中)。页面代码如下:

<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这个页面,我们就会得到当前服务器的时间,如下图:

这是正确的写法,能够得到数据。但我们在实际用的时候经常会由于这样或那样的原因导致无法成功得到数据,比较经常碰到的错误就是parsererror。parsererror的意思是解析错误,出现这个错误的时候,一般都是服务器有数据返回,但是这个数据无法被解析为json对象。也就是说服务器返回的json格式字符串有问题。这个问题一般是由于自己在写json返回串时的失误造成的,比方说一些逗号和引号。如果把返回串改成如下写法:

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

再来打开jsonp.html页面,就会得到如下结果:

这说明我们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,如下图:

我们会神奇的发现,尽管在发起请求时,我们规定了使用post方式提交,但浏览器在实际提交的时候使用的却是get方式。这说明jquery在发起跨域请求时,会作一个内部处理,让请求只能以get方式提交。所以在使用jquery的jsonp格式进行跨域请求时,我们最好都使用get方式提交请求。





© 著作权归作者所有

挨踢旅行者
粉丝 2
博文 20
码字总数 20739
作品 0
昌平
程序员
私信 提问
看小白如何解决ajax跨域问题

由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决ajax的跨域问题。本篇将讲述一个小白从遇到跨...

六只
2012/06/29
15.4K
3
$.ajax jsonp parsererror

场景重现 通过发起的跨越请求代码如下: 发起 ajax 跨域请求后... 咋一看我还以为是我代码哪里写漏了,检查过后,代码没问题. 同时把完整的请求,直接扔到浏览器地址栏里访问,响应是正常的. 但是...

taadis
2017/06/08
250
0
JQuery的Ajax跨域请求的解决方案

今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuery对于...

Carl_
2014/07/15
555
0
JQuery的Ajax跨域请求的解决方案

今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuery对于...

jz116
2012/04/10
6.9K
3
JSONP原理及JQUERY JSONP的使用

JSONP原理 JSON和JSONP   JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。   JSONP...

听风雨
2014/03/01
426
0

没有更多内容

加载失败,请刷新页面

加载更多

arduino项目-1. 模拟楼道灯

@toc 1.1 情景说明 说明 漆黑的夜晚,当有人非法进入一所房屋,房屋内的灯在恰当的时间亮起,也许会有效阻止非法活动的继续。 效果展示 1.2 实验器材 器材名称 数量 继电器 1 人体红外感应器...

acktomas
12分钟前
1
0
Nacos 常见问题及解决方法

Nacos 开源至今已有一年,在这一年里,得到了很多用户的支持和反馈。在与社区的交流中,我们发现有一些问题出现的频率比较高,为了能够让用户更快的解决问题,我们总结了这篇常见问题及解决方...

阿里云官方博客
18分钟前
2
0
pinyin4j 满足中文转拼音的需求

引入依赖 // https://mvnrepository.com/artifact/com.belerweb/pinyin4j //汉字转拼音compile group: 'com.belerweb', name: 'pinyin4j', version: '2.5.1' 写入中文转拼英的工具......

edison_kwok
23分钟前
2
0
IPSE接入Substrate/Polkadot插槽实现互操作性的运行原理

Substrate框架将区块链的众多功能都模块化,对于开发者来说,只是一个选择的问题,同时还保持了众多的可以定制的功能和模块,比如底层通信模块,比如账户体系,比如共识机制等都是可以自己定...

IPSE
29分钟前
153
0
linux配置安装phpMyAdmin的步骤记录

1、首先在phpMyAdmin官方网站 http://www.phpmyadmin.net/downloads下载源码包,或者通过脚本之家进行下载://www.jb51.net/codes/405261.html ,下载后上传到服务器解压即可,或者通过Linux...

蜗牛女孩
31分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部