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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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遍历数组的方法分享
2012/03/22 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
详解php的socket通信
2015/08/11 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
理解JavaScript的prototype属性
2012/02/11 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
Python threading多线程编程实例
2014/09/18 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
如何基于python操作json文件获取内容
2019/12/24 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
经典导游欢迎词
2015/01/26 职场文书
2015年超市工作总结
2015/04/09 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
python基础之函数的定义和调用
2021/10/24 Python
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python
Python面试不修改数组找出重复的数字
2022/05/20 Python