jQuery使用JSONP实现跨域获取数据的三种方法详解


Posted in jQuery onMay 04, 2017

本文实例讲述了jQuery使用JSONP实现跨域获取数据的三种方法。分享给大家供大家参考,具体如下:

第一种方法是在ajax函数中设置dataType为'jsonp'

$.ajax({
  dataType: 'jsonp',
  url: 'http://www.a.com/user?id=123',
  success: function(data){
    //处理data数据
  }
});

第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
  //处理data数据
});

第三种方法是使用getScript方法

//此时也可以在函数外定义foo方法
function foo(data){
  //处理data数据
}
$.getScript('http://www.a.com/user?id=123&callback=foo');

实例演练:

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp</title>
<script src="jquery-1.8.0.min.js"></script>
<script>
  $.ajax({
    type : "post",
    url : "jsonp.php?name=zhaoxiace&age=30",
    dataType : "jsonp",
    jsonp: "callbackParam",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
    jsonpCallback:"callbackFunction",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
    success : function(data){
      console.log(data.statusCode + "/" + data.message + "/" + data.name + "/" + data.age);
    },
    error:function(){
      alert('请求失败');
    }
  });
</script>
</head>

jsonp.php

<?
$data["age"] = $_GET['age'];
$data["name"] = $_GET['name'];
$data["statusCode"]="200";
$data["message"]="成功";
$tmp= json_encode($data); //json数据
echo $callback . '(' . $tmp .')'; //返回格式,必需
?>
jQuery 相关文章推荐
关于jQuery库冲突的完美解决办法
May 20 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现本地存储
Dec 22 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
jQuery树插件zTree使用方法详解
May 02 #jQuery
jQuery Tree Multiselect使用详解
May 02 #jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 #jQuery
jQuery实现按比例缩放图片的方法
Apr 29 #jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 #jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 #jQuery
jQuery设置图片等比例缩小的方法
Apr 29 #jQuery
You might like
收音机的保养
2021/03/01 无线电
用PHP实现WEB动态网页静态
2006/10/09 PHP
php 魔术函数使用说明
2010/02/21 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
Python argv用法详解
2016/01/08 Python
python实现多线程的两种方式
2016/05/22 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python并发和异步编程实例
2018/11/15 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
python的移位操作实现详解
2019/08/21 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
Python中如何添加自定义模块
2020/06/09 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
卫生院义诊活动总结
2015/05/07 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS