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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 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
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
List Installed Software Features
2007/06/11 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
python3+PyQt5自定义视图详解
2018/04/24 Python
django创建超级用户过程解析
2019/09/18 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
css3的transition属性详解
2014/12/15 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
项目建议书格式
2014/03/12 职场文书
党员承诺践诺书
2014/05/20 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
2014年法院工作总结
2014/11/24 职场文书
同学会邀请函模板
2015/01/30 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
Redis实现一个账号只能登录一个设备
2022/04/19 Redis