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使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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下目前为目最全的CURL中文说明
2010/08/01 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
python的exec、eval使用分析
2017/12/11 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
Python pip使用超时问题解决方案
2020/08/03 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
晚会邀请函范文
2014/01/24 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
司仪主持词两篇
2014/03/22 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
素质教育学习心得体会
2016/01/19 职场文书
学前班教学反思
2016/02/24 职场文书