JSONP跨域请求数据报错 “Unexpected token :”的解决办法
原文 http://www.cnphp6.com/archives/65409
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这是传递过去的参数 。
转载于:https://www.cnblogs.com/zhangycun/p/7504211.html
JSONP跨域请求数据报错 “Unexpected token :”的解决办法相关推荐
- PHP后台处理jQuery Ajax跨域请求问题 — xx was not called解决办法
// 前台代码 $.ajax({url: 'http://www.ushark.net/home/save_trial_apply',dataType: 'jsonp',processData: fa ...
- 轻松搞定JSONP跨域请求
轻松搞定JSONP跨域请求 一.同源策略 要理解跨域,先要了解一下"同源策略".所谓同源是指,域名,协议,端口相同.所谓"同源策略",简单的说就是基于安全考虑, ...
- 【漏洞利用】JSONP跨域请求漏洞 挖掘、利用详解
参考文章 轻松搞定JSONP跨域请求 jsonp跨域原理,使用以及同源策略 跨域漏洞丨JSONP和CORS跨域资源共享 Tag: Ref: [[019.同源策略]] 本片文章仅供学习使用,切勿触犯法律 ...
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
- Jsonp 跨域请求实例
Jsonp 跨域请求实例 关于jsonp的一个实例,其实自己也不是很了解,今天下午稍微研究了一下: 简单来说,jsonp就是为了两个不同网站之间数据传递而产生的,主要用于js脚本,因为浏览器本身是禁止 ...
- 原生JS实现Ajax和JSONP跨域请求
背景: 对接身份证录入和门锁卡号录入设备中,安装驱动完成后,提供的接口服务是http://localhost:8099/?cmd=readbcardid&charset=gbk,返回的数据格式 ...
- jsonp跨域请求响应结果处理函数(python)
接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...
- JS的jsonp是什么?5分钟学会jsonp跨域请求
一.jsonp是什么? jsonp是解决跨域请求的一种技术.浏览器为了防止CSRF攻击会采用同源策略(协议/主机/端口均相同)限制,对非同源发起http请求(即跨域请求)会被浏览器阻止. 二.json ...
- 实现百度下拉菜单实例(利用jsonp跨域请求百度数据接口)
JSONP:是JSON with padding(填充式JSON或参数式JSON)的简写,它由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指 ...
最新文章
- 栈和队列应用之数制转换
- 如何在redhat8里使用gcc命令_如何使用DISM命令行工具修复Windows 10映像
- java 共享锁_Java锁--共享锁和ReentrantReadWriteLock
- Java方法中的参数太多,第5部分:方法命名
- [C++]vector创建二维数组
- 如何使用Markdown写博客
- java电脑上运行_java-在本地计算机上运行的Web应用程序
- php开发面试题---禁用cookie之后,如何使用session
- 数据库中的年月日表达
- iOS 算法的前世今生:算法原理、常用算法(二)加密算法
- css带三角形的对话框
- JAVA实现字体扩大代码_[Java教程]jQuery实现设置字体大小代码实例
- 调通sina33下的AP6212A0版本的BT(V1.0)
- 剑侠世界2不显示服务器,剑侠世界2去哪个服务器好_哪个区人多问题说明_软吧...
- revit2016对应lumion版本_revit如何导入lumion?revit文件转化成lumion文件有诀窍!
- 计算机丢失dll文件夹,简单几招教你解决windows7旗舰版丢失dll文件
- 随手写的绿色征途手游的脚本辅助代码
- idea的几个好用快捷键、常用配置(包括git)、jdk和javaSE和javaEE、创建一个SE工程、debug、创建一个Web工程、打war包
- Maven学习(一) --------- Maven 简介
- java fail 方法_java中的fail是什么意思
热门文章
- 64位java_99.9%的Java程序员都说不清的问题:JVM中的对象内存布局?
- pagerank算法实现matlab,Matlab 入门及PageRank算法求解.ppt
- 用户识别率提升 25 倍 | 看神策数据如何利用 ID-Mapping 激活全域营销
- 周报速递丨小红书提出 IDEA 方法论;金融业七大数字化趋势
- 混沌大学签约神策数据,加快颠覆式创新教学步伐
- 编译x86架构的openwrt系统,让笔记本从u盘启动openwrt
- 俄科学家团队研发制备ALON新法,推进该材料在国防领域的应用
- 多线程编程学习笔记——任务并行库(二)
- mybatis表关联彻底理解
- 【非凡程序员】 OC第一节课 (指针浅析)