jsonp跨域获取数据的基础教程


Posted in Javascript onJuly 01, 2018

前言

由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域

(1) jsonp原理

由于script标签的src属性可以访问非同源的js脚本,所以通过src属性访问服务器会返回函数的js代码,而我们想要的数据就作为函数参数返回,而我们会先定义这个函数,返回的js代码就可执行

(2) jsonp实现代码

请求页面

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<script type="text/javascript">
 function jsonp(data){
  console.log(username)
 }
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
 $(document).ready(function(){
  var url = "http://www.example.com/jsonp.php?callback=jsonp";
  var script = $('<script><\/script>');
  script.attr("src",url);
  $("body").append(script);
 });
</script>
</body>
</html>
<?php

$data = {'name': '张三'};
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")";

?php>

之后php会返回

jsonp({
 name:'niuni
})

然后PHP返回的代码h会被请求页面的jsonp方法执行

(3)jQuery的简便jsonp跨域

<script>
 function showData (data) {
  console.info(data);
 }
 $(document).ready(function () {
  $("#btn").click(function () {
   $.ajax({
    url: "http://www.example.comjsonp",
    type: "GET",
    dataType: "jsonp",// 返回数据类型
    jsonpCallback: "showData",//回调函数
    // 获取数据成功就执行success函数
    success: function (data) {
     console.info("data");
    }
   });
  });
 });
</script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
微信小程序的授权实现过程解析
Aug 02 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 #Javascript
关于Vue组件库开发详析
Jul 01 #Javascript
D3.js实现拓扑图的示例代码
Jun 30 #Javascript
详解angular如何调用HTML字符串的方法
Jun 30 #Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 #Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 #Javascript
AngularJs分页插件使用详解
Jun 30 #Javascript
You might like
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
jquery 常用操作方法
2010/01/28 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Python的subprocess模块总结
2014/11/07 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
工程管理专业个人求职信范文
2013/12/07 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
宣传普通话标语
2014/06/27 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
给病人的慰问信
2015/03/23 职场文书