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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery冲突问题解决方法
Jan 19 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实现Unicode编码相互转换的方法示例
2020/11/17 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python实现多人聊天室
2020/03/31 Python
python 解压pkl文件的方法
2018/10/25 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
银行学习十八大感想
2014/01/11 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
面试通知邮件
2015/04/20 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
推普标语口号大全
2015/12/26 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
SQL Server删除表中的重复数据
2022/05/25 SQL Server