jsonp跨域
来源:互联网 发布:花呗充值q币的淘宝店 编辑:程序博客网 时间:2024/06/04 19:38
JSONP
JSON with Padding
其本质是利用了<script src=""></script>
标签具有可跨域的特性,由服务端返回一个预先定义好的Javascript
函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成。
只能以GET方式请求
注意只能够通过
get
方法服务端代码
<?php // echo "alert('天气不错哦')"; $callBack = $_GET['callback']; $arr = array( 'name' =>'西兰花' , 'color' =>'red' ); echo $callBack."(".json_encode($arr).")";?>
前端代码:注意,域名不同
- 核心是 通过script标签的src属性提交get请求
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function fn(data){ console.log(data); } </script> <script type="text/javascript" src='http://www.section02.com/seciton02_jsonP.php?callback=fn'></script></head><body> <h1>区域1的页面_jsonP演示</h1></body></html>
jQuery 的$.ajax()
方法当中集成了JSONP的实现,可以非常方便的实现跨域数据的访问。
dataType: 'jsonp' 设置dataType值为jsonp即开启跨域访问
jsonp
可以指定服务端接收的参数的“key”值,默认为callback
jsonpCallback
可以指定相应的回调函数,默认自动生成
- 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="jq发送jsonp" id='jqJsonp'>
</body>
</html>
<!-- 导入jq -->
<script type="text/javascript" src='../js/jquery.min.js'></script>
<script type="text/javascript">
function myJsonPCallBack(data) {
console.log('自己写的 回调函数名'+data);
}
// 如果 使用jq 发送jsonp 他会自动帮助我们 拼接一个callback
// 如果想要设置 自己的 回调函数 可以通过jsonpCallback 来设置 自己的名字
// 跟 我们自己写的 发送ajax相比要更改
/*
dataType:jsonp
如果想要自定义 回调的函数名字 需要添加
jsonpCallback:指定自己的函数名字
*/
$(function () {
$('#jqJsonp').click(function () {
$.ajax({
url:'03.jq_jsonp.php',
success:function(data){
console.log(data);
},
dataType:'jsonp',
jsonpCallback:"myJsonPCallBack"
})
})
})
</script>
流程图:
阅读全文
0 0
- json、jsonp、jsonp跨域
- JSONP跨域
- JSONP跨域
- Jsonp 跨域
- jsonp 跨域
- jsonp跨域
- jsonp 跨域
- jsonP跨域
- jsonp跨域
- JSONP跨域
- 跨域 - JSONP
- jsonp跨域
- 跨域jsonp
- 跨域-JSONP
- jsonp跨域
- Jsonp跨域
- jsonp跨域
- jsonp跨域
- Android Activity 透明
- document的createDocumentFragment()方法
- MyEclipse配置启动Tomcat时的jvm内存大小
- 检测输入是否全是数字
- Myql操作使用(一)
- jsonp跨域
- IP编址
- Struts2 学习
- 1.spring boot 开卷有益
- 手风琴效果
- java 常用集合list与Set、Map区别及适用场景总结
- 查看Oracle执行计划的几种方法 / oracle中DateTime类型的字段,建立索引后,查寻时索引如何生效?/ oracle 中sql语句怎么加多个强制索引
- CentOS7 下手动配置服务,以指定用户启动进程
- <C语言>“指针数组与数组指针+指针函数与函数指针”---区别理解