JSONP跨域请求数据报错 “Unexpected token :”的解决办法
2016-02-29 17:22
816 查看
摘要: Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Unexpected token :”,主要问题在于返回的数据格式不正确
本地虚拟两个域名,分别为:www.test.com、www.abc.com
http://www.test.com/index.html页面点击按钮,请求返回www.abc.com域名目录下的文件的数据,其代码为:
http://www.abc.com/json.php文件代码为:
在Chrome浏览器调试会发现报错了,如图:
![](http://static.oschina.net/uploads/space/2014/1202/141653_CuFe_1274682.jpg)
json.php返回的数据确实是json类型的数据 {"username":"jack","age":21,"gender":"male"} ,问题处在哪?
翻看了一下Jquery文档发现jsonp:"callback", jsonpCallback:"success_jsonpCallback",传递这两个参数是有原因的,jsonp的返回数据格式应该是: “客户端传递的回调方法名称(json数据)”,将php文件改为:
测试,正确返回结果,如下图:
![](http://static.oschina.net/uploads/space/2014/1202/142419_2Re1_1274682.jpg)
可以看到,php文件返回的结果是 success_jsonpCallback({"username":"jack","age":21,"gender":"male"}) ,这才是正确的jsonp返回格式,而success_jsonpCallback这是传递过去的参数。
本地虚拟两个域名,分别为:www.test.com、www.abc.com
http://www.test.com/index.html页面点击按钮,请求返回www.abc.com域名目录下的文件的数据,其代码为:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JSONP跨域请求</title> <script src="http://www.oschina.net/js/2012/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".button").on("click",function(){ $.ajax({ type:"get", url:"http://www.abc.com/json.php", dataType:"jsonp", jsonp:"callback", jsonpCallback:"success_jsonpCallback", success:function(json){ $(".user").html("用户信息:"+json.username+","+json.age+","+json.gender); }, error:function(){ alert("请求出错!"); } }); }); }); </script> </head> <body> <button class="button">点击获取数据</button> <div class="user"></div> </body> </html>
http://www.abc.com/json.php文件代码为:
<?php $arr = array ('username'=>'jack','age'=>21,'gender'=>'male'); echo json_encode($arr); ?>
在Chrome浏览器调试会发现报错了,如图:
![](http://static.oschina.net/uploads/space/2014/1202/141653_CuFe_1274682.jpg)
json.php返回的数据确实是json类型的数据 {"username":"jack","age":21,"gender":"male"} ,问题处在哪?
翻看了一下Jquery文档发现jsonp:"callback", jsonpCallback:"success_jsonpCallback",传递这两个参数是有原因的,jsonp的返回数据格式应该是: “客户端传递的回调方法名称(json数据)”,将php文件改为:
<?php $arr = array ('username'=>'jack','age'=>21,'gender'=>'male'); echo $_GET['callback']."(".json_encode($arr).")"; ?>
测试,正确返回结果,如下图:
![](http://static.oschina.net/uploads/space/2014/1202/142419_2Re1_1274682.jpg)
可以看到,php文件返回的结果是 success_jsonpCallback({"username":"jack","age":21,"gender":"male"}) ,这才是正确的jsonp返回格式,而success_jsonpCallback这是传递过去的参数。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- 数组方法汇总
- 解决Ajax悬停效果,无法遮蔽FLASH的问题
- 再谈Jquery Ajax方法传递到action(补充)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南