Ajax之处理不同格式的JSON数据
JSON是一种网络中的数据格式,主要用于网络间的数据传输,它比XML格式的数据传输速度快,使用更广。
1.Ajax处理对象格式的JSON数据:
<script src="../JS/jquery-1.12.4.min.js"></script>
<script>
function show(){
// Ajax使用GET简化方式,请求JSON数据
// get请求格式:get(url,传递给服务器的参数,请求成功后执行的函数,能够解析的数据格式)
$.get('student.json',{},function(response){
// 当请求成功JSON解析出来的数据有两个,一个是对象/数组,还有一个所示请求状态码
// response是解析后的数据,
// 如果JSON解析之前的数据是数组,那么response就是数组
// 如果JSON解析之前的数据是对象,那么response就是对象
var $name = $('#name');
var $age = $('#age');
var $sex = $('#sex');
var $school = $('#school');
$name.html(response.name);
$age.html(response.age);
$sex.html(response.sex);
$school.html(response.school);
},'JSON').error(function(){
alert('Error!');
});
// Ajax利用POST方式进行数据传输
$.post('student.json',{},function(response){
$('#name').html(response.name);
$('#age').html(response.age);
$('#sex').html(response.sex);
$('#school').html(response.school);
},'JSON').error(function(){
alert('Error!');
});
}
</script>
2.Ajax处理数组格式的JSON数据:
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$.get('resume.json',{},function(response){
$('#photo').html("<img src='"+response[0]+"'>");
$('#name').html(response[1]);
$('#age').html(response[2]);
$('#school').html(response[3]);
$('#langage').html(response[4]);
$('#empiric').html(response[5]);
$('#habby').html(response[6]);
$('#reward').html(response[7]);
},'JSON').error(function(){
$('#div').html('<h1>对不起,请求错误!</h1>')
});
});
</script>
Ajax之处理不同格式的JSON数据的更多相关文章
- Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ajax使用向Spring MVC发送JSON数据出现 org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported错误
ajax使用向Spring MVC发送JSON数据时,后端Controller在接受JSON数据时报org.springframework.web.HttpMediaTypeNotSupportedE ...
- AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- ajax请求解析springmvc返回的json数据
需要使用的框架 spring3.0 jquery1.9.0(简化ajax开发的js库) Jackson(json处理器):jackson-core-asl-1.9.2.jar,jackson-mapp ...
- [ 转 ]jquery的ajax和getJson跨域获取json数据
目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...
- 【转】AJAX 跨域请求 - JSONP获取JSON数据
来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...
- jquery的ajax和getJson跨域获取json数据
目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...
- ASP.NET前台table通过Ajax获取绑定后台查询的json数据
上一篇<ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据>写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询.接下来就写一个前台table通过ajax J ...
- java-生成任意格式的json数据
最近研究java的东西.之前靠着自己的摸索,实现了把java对象转成json格式的数据的功能,返回给前端.当时使用的是 JSONObject.fromObject(object) 方法把java对象换 ...
随机推荐
- Echarts自定义折线图例,增加选中功能
用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...
- xshell使用xftp传输文件、使用pure-ftpd搭建ftp服务
6月25日任务 15.4 xshell使用xftp传输文件15.5 使用pure-ftpd搭建ftp服务扩展vsftp使用mysql存放虚拟用户并验证 http://www.aminglinux.co ...
- Vue 一个注册页面有省市联动
var vm = new Vue({ el: '#complete-info', data: { provinceList: [], selectedProvince: "", c ...
- OC循环方法推荐-块循环遍历(比for循环好用)
最近在看一本书<Effective OC 2.0>,今天看到有个tip是OC适中循环各自优劣性,作者最终推荐此块循环. 阅读时思考了下块循环是否方便实现内部循环终止外部循环的问题. 于是做 ...
- Pycharm常见快捷键
Ctrl+/注释(取消注释)选择的行 Shift + Enter开始新行 Ctrl + Enter智能换行 TAB Shift+TAB缩进/取消缩进所选择的行 Ctrl + Alt + I自动缩进行 ...
- 这可能是最容易入门的socket教程了
前言: 如今,网络编程已然成为了一个后端开发工程师需要具备的核心技能之一.因此,该博客力求提供最简单.通俗的描述方式,来描绘网络编程中常见的知识点,同时附带代码示例,后期会加上具体的抓包分析,实际项目 ...
- luogu P2863 [USACO06JAN]牛的舞会The Cow Prom |Tarjan
题目描述 The N (2 <= N <= 10,000) cows are so excited: it's prom night! They are dressed in their ...
- luogu P2296 寻找道路 |最短路
题目描述 在有向图 G 中,每条边的长度均为 1,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 路径上的所有点的出边所指向的点都直接或间接与终点连通. 在满足条件 1 的 ...
- idea建立项目关联到git仓库操作步骤
eg:创建一个名为demo的git项目 创建git远程项目,命名为[/demo] 在[D:\workspace\gf]创建本地项目[demo] 在idea里选择[VCS]->[Checkout ...
- iOS面试的算法相关
转自:https://www.jianshu.com/p/c4820b159159 面试中遇到的这些算法,在平常工作中,基本不会用到. 不过现实的面试中经常喜欢问关于算法的问题 有些还要求写出代码.一 ...