JSONP跨域请求数据报错 Unexpected token 的解决办法

最新推荐文章于 2024-08-21 18:14:08 发布

很萌很蠢

最新推荐文章于 2024-08-21 18:14:08 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/hhduyc/article/details/83780290

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

原文 http://www.cnphp6.com/archives/65409

Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Unexpected token :”，主要问题在于返回的数据格式不正确

本地虚拟两个域名，分别为：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浏览器调试会发现报错了，如图：

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).")";?>

测试，正确返回结果，如下图：

可以看到，php文件返回的结果是 success_jsonpCallback({“username”:”jack”,”age”:21,”gender”:”male”}) ，这才是正确的jsonp返回格式，而 success_jsonpCallback这是传递过去的参数。

重点是主三个参数：

dataType:"jsonp",          jsonp:"callback",          jsonpCallback:"success_jsonpCallback",

示例：

$.ajax({
type : "POST",
url : domain+"/member_login.action",
data : {
loginName:username,
password:password,
apptype:2
},
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
//contentType: "application/json;charset=UTF-8", //传值方式
async : true,
success : function(msg) {
alert(msg);
alert(msg.member.memberName);
console.log(msg);
if(msg==""){
alert("账号密码错误！登录失败!");
}else{

}
}
});

sevlet端写法：

response.getWriter().append("flightHandler("+jsonString+")");

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow

很萌很蠢

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫