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实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 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加密解密的代码
2006/10/09 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
jQuery 性能优化指南(3)
2009/05/21 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python中的推导式使用详解
2015/06/03 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
Python内置函数locals和globals对比
2020/04/28 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
教师专业自荐书范文
2014/02/10 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
教师节宣传方案
2014/05/23 职场文书
小学生环保标语
2014/06/13 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
六年级小学生评语
2014/12/26 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
健康教育主题班会
2015/08/14 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书