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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
浅谈PHP进程管理
2019/03/08 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
js charAt的使用示例
2014/02/18 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Django Admin实现上传图片校验功能
2016/03/06 Python
python使用mysql数据库示例代码
2017/05/21 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python中的数据结构比较
2019/05/13 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Python yield的用法实例分析
2020/03/06 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
什么是Rollback Segment
2013/04/22 面试题
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
请假条标准格式规范
2014/04/10 职场文书
班主任评语大全
2014/04/26 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
教师节慰问信
2015/02/15 职场文书
纪委立案决定书
2015/06/24 职场文书