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 Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jquery实现抽奖功能
Oct 22 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
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
JS版网站风格切换实例代码
2008/10/06 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
Python中条件判断语句的简单使用方法
2015/08/21 Python
Python实现完整的事务操作示例
2017/06/20 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
使用Python发现隐藏的wifi
2020/03/04 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
文秘专业个人求职信
2013/12/22 职场文书
美食节策划方案
2014/05/26 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫