文档章节

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

西迷岛主
 西迷岛主
发布于 2014/12/02 14:26
字数 372
阅读 26240
收藏 10

本地虚拟两个域名,分别为: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这是传递过去的参数


© 著作权归作者所有

西迷岛主
粉丝 4
博文 31
码字总数 10263
作品 0
广州
个人站长
私信 提问
加载中

评论(2)

前端布道
我的jq 的ajax,pc 和ipad数据请求正常,但是网页的APP和生成的APP都不能请求到数据,error错误,不走success函数,求解
ITCHN
ITCHN
正确解决了我的问题,谢谢你的总结
Java Ajax jsonp 跨域请求

什么是JSONP 一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从...

颓废的幻想者
2016/08/08
97
0
Ajax跨域问题,请求第三方接口数据,求助!急急!

我在开发微店,遇到的问题是他们提供的接口如下: 很明显这个是跨域的,所以我用了 jquery的JSONP但是,后台返回的是 json数据,所以报错如下: Uncaught SyntaxError: Unexpected token : 这...

乐派电影
2015/03/13
4.2K
10
求救: jsonp跨域访问问题

我正在做一个和腾讯开放平台对接的项目。需要使用QQ的登陆功能,而且要获取到用户的QQ头像。 现有代码如下: 但是问题是,当我请求的时候,可以再浏览器的控制台看到请求到的数据,但是在代码...

烽焱10仴
2014/08/26
1K
5
ajax 跨域 jsonp对返回的json格式报错"Uncaught SyntaxError: Unexpected token :"

之前的代码 需要在ajax加入一个 jsonpCallback:"success_jsonpCallback",修改后如下 此时发送出去的url 就是 到此还没有改完,需要在后端修改因为我们的后端使用 resultfull 所以对于callb...

六月星星
2016/10/19
28
0
淘淘商城系列——jsonp的原理及两种实现方式

首先,说下什么是跨域?有以下两种方式的跨域: 域名不同 域名相同,端口不同 解决js的跨域问题可以使用jsonp。那接下来说下什么是jsonp? jsonp不是新技术,它只是一种跨域的解决方案,使用...

yerenyuan_pku
2017/06/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

二进制位操作

单片机,或者一些模块的设置操作,都是由一个字节数据来完成,每位各有定义。就需进行位操作来组合需要的数字结果。 以JavaScript为例,编写位操作。 我们期望得到这样一个二进制数:0101101...

format
23分钟前
2
0
聊聊中国的通信行业:从“七国八制”到“中华”脊梁

本期文章和大家一起来聊一聊我曾经从事过的通信行业吧。最近各方面信息的泛滥,包括和华为的同学聊天,自己确实也感慨颇多。想想我自己本科主修通信工程,研究生再修信息与通信工程,从本科开...

CodeSheep
今天
6
0
MDK:ARM M451M:exceed the range of code meory, continue to erase or not?

问题: 代码空间超限 几天前就遇到:exceed the range of code meory, continue to erase or not? 如下所示: 解决过程 开始以为中MDK软件的128KB限制,如是就不能生成HEX文件,应该链接时有提...

SamXIAO
今天
1
1
OSChina 周六乱弹 —— 因违反《中华人民共和国治安管理处罚法》第四十四条之规定

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :#今日歌曲推荐# 惊艳分享谷微的单曲《安守本份》(@网易云音乐) 《安守本份》- 谷微 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
今天
533
12
Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部