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扩展_动力节点Java学院整理
Jul 05 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
详解jquery和vue对比
Apr 16 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 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
drupal 代码实现URL重写
2011/05/04 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
Python中实现三目运算的方法
2015/06/21 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
Python Cookie 读取和保存方法
2018/12/28 Python
python中pop()函数的语法与实例
2020/12/01 Python
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
Unix如何添加新的用户
2014/08/20 面试题
网络工程师的自我评价
2013/10/02 职场文书
自荐书4要点
2014/01/25 职场文书
对教师的评语
2014/04/28 职场文书
社区春季防火方案
2014/06/02 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
诚信承诺书
2015/01/19 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
Nginx的基本概念和原理
2022/03/21 Servers
python处理json数据文件
2022/04/11 Python