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中map函数的两种方式
Apr 07 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jquery实现上传文件进度条
Mar 26 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 动态添加记录
2009/03/10 PHP
PHP 多维数组排序实现代码
2009/08/05 PHP
php一个找二层目录的小东东
2012/08/02 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
javascript 获取图片颜色
2009/04/05 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
对python中dict和json的区别详解
2018/12/18 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
python实现简单坦克大战
2020/03/27 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
讲文明倡议书
2015/04/29 职场文书
社区服务理念口号
2015/12/25 职场文书
新员工入职感言范文!
2019/07/04 职场文书
导游词之阆中古城
2019/12/23 职场文书