JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码


Posted in jQuery onSeptember 23, 2017

通过JQuery可以跨域获取JSON数据,但必须弄清楚的是,JQuery不可以跨域获取任意JSON格式的数据,必须要通过服务端输出特定的针对JQuery跨域读取的JSON数据。你可能目前对此仍然毫无了解,没关系,本文将以最简单易懂的方式介绍这个技术,相信人人都容易读懂,并能够实际应用。

JQuery获取同域的JSON数据

首先引用jQuery库文件:

<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

jQuery代码:

var url="http://localhost:8000/user.php";
$(function(){
 $.getJSON(url,function(data){
 alert (data.name);
})
});

服务器代码(PHP):

<?php 
header('Content-Type:text/html;Charset=utf-8'); 
$arr = array( 
 "name" => "xiaoming", 
 "pass" => "123456"
); 
echo json_encode($arr); 
?>

服务器返回字符串:

{"name":"xiaoming","pass":123456}

JQuery获取跨域的JSON数据

首先引用jQuery库文件:

<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

jQuery代码:

var url="http://localhost:8000/user.php?jsoncallback=?";
$(function(){
 $.getJSON(url,function(data){
 alert (data.name);
})
});

服务器代码(PHP):

<?php 
header('Content-Type:text/html;Charset=utf-8'); 
$arr = array( 
 "name" => "xiaoming", 
 "pass" => "123456"
); 
echo $_GET['jsoncallback']."(".json_encode($arr).")"; 
?>

服务器返回字符串(需要传入参数“jsoncallback”):

jQuery19003894091040769696_1505708469340({"name":"xiaoming","pass":123456})

说明,jQuery传入值每次都不一样。

JQuery获取同域和跨域JSON数据的区别

从上述两个例子看到,JQuery获取同域和跨域JSON数据的区别有两点:

1)jQuery写法不同,跨域时要多加一个参数“jsoncallback=?”

2)服务器端返回字符串的写法不同,跨域时需要用到“'jsoncallback'”的传入值,构造的字符串格式是:jsoncallback传入值(原JSON字符串),注意要用括号把原JSON字符串包住。

总结

通过本文介绍,大家都应该明白了,要jQuery跨域读取JSON数据,首先需要在服务器端构造一个特殊的JSON字符串,否则是读取不了的,好在,构造方法十分简单,文中例子一看便懂。

jQuery + Ajax 获得跨域JSON数据

前面的例子用的是 $.getJSON 来获得跨域JSON数据,其实我们用 $.ajax 的方法也同样可以的。

首先引用jQuery库文件:

<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

jQuery代码:

<script type="text/javascript"> 
$(function(){ 
 $.ajax({ 
 type: 'get', 
 url: 'http://localhost:8000/user.php?jsoncallback=?', 
 dataType: 'jsonp', 
 jsonp: "jsoncallback", 
 success: function(data) { 
  alert("用户名:"+ data.name+" 密码:"+ data.pass); 
 }
 }); 
}) 
</script>

特别注意,dataType 是 jsonp 而不是 json 。

jQuery 相关文章推荐
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 #jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 #jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 #jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 #jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 #jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 #jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 #jQuery
You might like
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
初学JavaScript第二章
2008/09/30 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python模拟登录12306的方法
2014/12/30 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
如何通过Python实现标签云算法
2019/07/02 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
幼儿园新学期开学寄语
2015/05/27 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL