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

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','gender'=>'male'); echo $_GET['callback']."(".json_encode($arr).")"; ?>

测试,正确返回结果,如下图:

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



重点是主三个参数:

dataType:"jsonp",

示例:

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

相关文章

AJAX是一种基于JavaScript和XML的技术,能够使网页实现异步交...
在网页开发中,我们常常需要通过Ajax从后端获取数据并在页面...
在前端开发中,经常需要循环JSON对象数组进行数据操作。使用...
AJAX(Asynchronous JavaScript and XML)是一种用于创建 We...
AJAX技术被广泛应用于现代Web开发,它可以在无需重新加载页面...
Ajax是一种通过JavaScript和HTTP请求交互的技术,可以实现无...