ajax跨域请求jsonp出现Uncaught SyntaxError,该如何解决?

 我来答
xiangsi1016
高粉答主

推荐于2019-10-12 · 说的都是干货,快来关注
知道大有可为答主
回答量:157
采纳率:100%
帮助的人:2.6万
展开全部

Jquery文档中描述,jsonp:”callback”, jsonpCallback:”success_jsonpCallback”,传递这两个参数是有原因的,jsonp的返回数据格式应该是: “客户端传递的回调方法名称(json数据)”。

比如将这段代码

<?php 

$arr = array ('username'=>'jack','age'=>21,'gender'=>'male'); 

echo json_encode($arr);

?>

改为

<?php 

$arr = array ('username'=>'jack','age'=>21,'gender'=>'male'); 

echo $_GET['callback']."(".json_encode($arr).")";

?>

找到两段代码的区别就知道怎么解决啦。

ajax跨域失败,是因为js遵循同源规则,即不同域名下的js访问是不被允许的(安全考虑),那么如何解决,主要有三个方法:

第一个是修改服务器,ajax返回数据,也就是dataType类型设置为jsonp,jsonp是专门为解决跨域问题而生的,具体用法自行百度。

第二个方法,就是先用自己服务器后台执行curl,抓取目标服务器上的文件,在用前端ajax获取服务器后台获取到的目标服务器文件结果即可。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
拽拽的神鹿_
2018-01-05 · TA获得超过7778个赞
知道小有建树答主
回答量:55
采纳率:100%
帮助的人:7722
展开全部
  • 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这是传递过去的参数 。

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式