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 相关文章推荐
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
vuex入门最详细整理
Mar 04 Javascript
React服务端渲染原理解析与实践
Mar 04 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
PHP比你想象的好得多
2014/11/27 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
php session的应用详细介绍
2017/03/22 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
jquery键盘事件介绍
2011/01/31 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
JavaScript引用类型Function实例详解
2018/08/09 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
Python简单日志处理类分享
2015/02/14 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
总结表彰大会主持词
2014/03/26 职场文书
表扬稿格式范文
2015/01/16 职场文书
交通处罚决定书
2015/06/24 职场文书
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server