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 append与appendTo方法比较
May 24 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php 分页函数multi() discuz
2009/06/21 PHP
php 图片上传类代码
2009/07/17 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
jquery each()源代码
2011/02/14 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python 含参构造函数实例详解
2017/05/25 Python
Python自定义线程类简单示例
2018/03/23 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
Python sublime安装及配置过程详解
2020/06/29 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
西式婚礼证婚词
2014/01/12 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
学习党代会心得体会
2014/09/05 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
优秀教师个人材料
2014/12/15 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书