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分页插件jqPaginator的使用方法
Aug 09 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 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
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
php制作简单模版引擎
2016/04/07 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
jQuery功能函数详解
2015/02/01 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
浅谈Python traceback的优雅处理
2018/08/31 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
法律进企业活动方案
2014/03/04 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript