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

转载 2017年06月05日 15:28:33

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这是传递过去的参数 。

js出现的错误unexpected token

对于这个问题,肯定就是那个地方少了对应的符号,比如“”,只有一般就会报这个错误,在php传输到页面中的代码 $putTwo = ' ...
  • echoandprint_r
  • echoandprint_r
  • 2016年11月03日 13:46
  • 11529

hibernate 出现unexpected token: xxx 解决办法

在使用hibernate hql 进行数据库查询时候,出现 unexpected token:xxx时, 是由于,自己hql语句语法上有错误导致的,认真的检查自己的hql语句,比如,对某个字段查询时...
  • q54244125
  • q54244125
  • 2017年09月13日 18:25
  • 1601

关于react-native出现SyntaxError /Users/mac/firstTest/index.ios.js: Unexpected token的问题

mac上使用webstorm编辑index.ios.js的时候,会出现这一样的错误:2016-08-30 11:55:22.335 [fatal][tid:main] SyntaxError /Use...
  • wm9028
  • wm9028
  • 2016年08月30日 13:38
  • 2857

unexpected token: *的解决办法

首先要搞清楚sql与hql的区别! sql操作的是数据库表,而hql操作的是对象! sql中“select * from table”,而hql中" from table对象"! ...
  • xb12369
  • xb12369
  • 2013年03月12日 10:03
  • 54499

Unexpected token }

Unexpected token }  错误原因:json字符串报错 [{"CITYCODE":"410100","MONITORTIME":"2016-08-02","FORECASTTIME":"...
  • u010082526
  • u010082526
  • 2016年08月02日 16:34
  • 2537

unexpected token: Member

14:13:34,873 [main] ERROR [org.hibernate.hql.internal.ast.ErrorCounter.reportError(ErrorCounter.java...
  • baidu_28283827
  • baidu_28283827
  • 2016年10月11日 14:15
  • 647

Uncaught SyntaxError: Unexpected token )

Uncaught SyntaxError: Unexpected token )以下代码引发了此异常: 超清 高清 流畅 ...
  • testcs_dn
  • testcs_dn
  • 2014年09月05日 10:34
  • 187147

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

Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Unexpected token :”,主要问题在于返回的数据格式不正确 本地虚拟...
  • shjavadown
  • shjavadown
  • 2016年07月27日 09:21
  • 1856

解决方法 Uncaught SyntaxError: Unexpected token < in JSON at position 0

解决方法 Uncaught SyntaxError: Unexpected token < in JSON at position 0 win7 环境下php5.4和phpstorm8.3 开发遇到...
  • wyx100
  • wyx100
  • 2017年02月19日 10:45
  • 49244

【错误处理】:Uncaught SyntaxError: Invalid or unexpected token

无效或意外的标记。 初学,肉眼凡胎,经验不足,瞅了半天才发现,原来是尖括号出的问题,>不同于>,我滴神,确实一个大一个小。 此文就这么点。...
  • u011439689
  • u011439689
  • 2016年09月06日 15:13
  • 73455
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JSONP跨域请求数据报错 “Unexpected token :”的解决办法
举报原因:
原因补充:

(最多只允许输入30个字)