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','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 :”的解决办法的更多相关文章
- ajax跨域请求 Uncaught SyntaxError: Unexpected token ：
最近使用前后端分离开发项目比较多,经常碰到的一个问题就是,前端静态页面请求,后端api获取数据,很多时候,前端和后端都不是在同一个域下的(协议,域名,端口). 这里使用的是ajax请求,因为浏览器的同 ...
- java Ajax跨域请求COOKIE无法带上的解决办法
1.web.xml加入以下节点,,一定放在第一个filter <!--目录下所有文件可以跨域Begin--> <filter> <filter-name>CorsF ...
- Ajax跨域请求COOKIE无法带上的解决办法
原生ajax请求方式: var xhr = new XMLHttpRequest(); xhr.open("POST", "http://xxxx.com/demo/b/ ...
- PHP后台处理jQuery Ajax跨域请求问题 — xx was not called解决办法
// 前台代码 $.ajax({ url: 'http://www.ushark.net/home/save_trial_apply', dataType: 'jsonp', processData: ...
- 使用jsonp跨域请求
一.异步对象,不能实现跨域请求 在站点A中访问站点B的数据: 站点A代码: window.onload = function () { document.getElementById("bt ...
- Django学习---jsonp跨域请求
jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
- jQuery ajax的jsonp跨域请求
一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...
- jsonp跨域请求响应结果处理函数(python)
接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...
随机推荐
- missing locales
原文地址:http://codewut.de/content/missing-locales-under-debian This drives me crazy! Every time I deboo ...
- 趋势型指标——MACD
1.简要介绍▪ 计算方法▪ DIFF▪ DEA▪ MACD▪ 构造原理▪ 缺点2.实战技巧3.运用技巧▪ 应用原理▪ 经典用法▪ 实战战法▪ 捕捉卖点▪ 买卖策略▪ 短线实战4.组合指标运用5.一般研 ...
- Redis 环境搭建与使用(C#)
Redis Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. Redis是一个key-value存储系统.和M ...
- PHP 7問世，2億網站效能翻倍有望
經過10年的漫長等待,PHP 7終於正式問世了.這個影響全球8成網站的開發語言,一舉從5.0版,跳過了功敗垂成的6.0版,一舉進入了7.0時代. 20年前初夏,1995年6月8日,一位愛解決問題的C語 ...
- 架设证书服务器 及 让IIS启用HTTPS服务(转)
无废话图文教程,教你一步一步搭建CA服务器,以及让IIS启用HTTPS服务. 一.架设证书服务器(CA服务) 1.在系统控制面板中,找到“添加/删除程序”,点击左侧的“添加/删除windows组件”, ...
- checkbox的三种状态处理
checkbox只有两种值:选中(checked)或未选中(unchecked).它可以有任何值,但是表单提交时checkbox的值只能是checked或unchecked.它的默认值是uncheck ...
- Docker实践(2)—虚拟网络
1 docker(container)的虚拟网络 docker的虚拟网络结构: host创建一个虚拟bridge,每个container对应一个虚拟网络设备(TAP设备),与bridge一起构成一个虚 ...
- Hello Kraken.js!
前言 kraken.js 由paypal 公司开源的一个用于快速开发基于Express.js框架应用的快速开发工具, 因为kraken 并没有在Express.js基础上更改多少东西,只是在原来的 ...
- Pinterest 架构：两年内月 PV 从零到百亿【翻译】
原文地址 这篇文章,采用 Markdown 方式,写的还是比较实在的,要是有架构图就好了. Pinterest 是图片版的 Twitter,用户把自己感兴趣的东西用图钉(Pins)钉在钉板(PinBo ...
- 一个非常棒的html5框架-ionic
http://ionicframework.com/ 之前用过app.js,相比ionic,真是弱爆了! http://learn.ionicframework.com/formulas/ 上面的链接 ...