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

转载 2016年07月27日 09:21:23

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

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

原文  http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError...
  • e_wsq
  • e_wsq
  • 2017年05月01日 03:36
  • 5406

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

Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Unexpected token :”,主要问题在于返回的数据格式不正确 本地虚拟两个...
  • qq_31915745
  • qq_31915745
  • 2017年06月05日 15:28
  • 2267

解决Ajax请求出现Uncaught SyntaxError: Unexpected token : 错误

转载自:http://blog.csdn.net/wqmain/article/details/8905287 一:问题引入 插件介绍:众所周知,使用ajax直接发起请求存在跨域无权限访问的问题,...
  • wj32166
  • wj32166
  • 2013年08月14日 10:43
  • 16510

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

在使用ajax请求的时候,遇到跨域的问题,一般解决办法有三种: 1. 使用代理; 2. 使用jsonp 3. 资源共享 这里,我使用了jsonp,由于第一次使用,这里遇到报错 “Uncaugh...
  • qq_36330643
  • qq_36330643
  • 2017年09月15日 15:34
  • 616

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

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 :”的解决办法
举报原因:
原因补充:

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