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 19 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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查看网页源代码的方法
2015/03/13 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
js验证上传图片的方法
2015/05/12 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
详解React中setState回调函数
2018/06/14 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
Python Property属性的2种用法
2015/06/21 Python
详解用python写一个抽奖程序
2019/05/10 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
商场总经理岗位职责
2014/02/03 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
环境卫生标语
2014/06/09 职场文书
英语复习计划
2015/01/19 职场文书
父亲节活动总结
2015/02/12 职场文书
求职自我推荐信
2015/03/24 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python