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回调方法使用示例
Jun 26 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jquery插件实现代码雨特效
Apr 24 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实现短域名互转
2013/07/05 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
php计算整个目录大小的方法
2015/06/19 PHP
php上传excel表格并获取数据
2017/04/27 PHP
php表单处理操作
2017/11/16 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
Django模板Templates使用方法详解
2019/07/19 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
银行授权委托书样本
2014/10/13 职场文书
化妆品促销活动总结
2015/05/07 职场文书
初中生活随笔
2015/08/15 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers