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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery实现滑动开关效果
Aug 02 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函数学习之PHP函数点评
2012/07/05 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
extjs form textfield的隐藏方法
2008/12/29 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
2013年研究生毕业感言
2014/02/06 职场文书
求职信怎么写
2014/05/23 职场文书
大明湖导游词
2015/02/03 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
Python实现生活常识解答机器人
2021/06/28 Python
总结Java对象被序列化的两种方法
2021/06/30 Java/Android