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对象换 ...
随机推荐
- PHP根据经纬度获取在范围坐标的数据
// 计算范围,可以做搜索用户 function GetRange($lat,$lon,$raidus){ //计算纬度 $degree = (24901 * 1609) / 360.0; $dpmL ...
- 小白的springboot之路(八)、继承Redis以及@Cacheable注解实现Redis缓存
0.前言 在项目中,缓存作为一种高效的提升性能的手段,几乎必不可少,Redis作为其中的佼佼者被广泛应用: 一.spring boot集成Redis 1.添加依赖 <dependency> ...
- 【Python成长之路】从零学GUI -- 制作智能聊天机器人
[写在前面] 鹏哥:最近老惹小燕同学不开心,结果都没人陪我聊天了.哎,好无聊呀! 肥宅男:女朋友什么的最无聊了,还没我的图灵机器人好玩. 鹏哥:图灵?好巧,和我部门同名. [效果如下] [实现过程] ...
- 机器学习算法在用户行为检测(UBA)领域的应用
[摘要]最近看到越来越多的安全圈的同学开始关注UBA或者UEBA的相关产品和技术,恰好这一段时也一直在跟进UBA产品的状况,正如Gartner报告所述,最具创新能力的UBA供应商往往都是一些初创公司, ...
- ios 在APP内提示更新
http://www.jianshu.com/p/24daf5147bda ios如何在应用内部提示更新 两颗星 http://www.jianshu.com/p/2ba10a58bb02 ...
- 对于在Dao层,一个DML操作一个事务,升级到Service层,一个用户,一个事务
原先的连接Connection,只能是来一次,新创建一个连接connection.这样如果事务在Dao层已经默认提交,在service层出错时,对于俩张关联会有俩种不同的结果.为了解决这样的问题,我们 ...
- [TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍
1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onf ...
- 2017 ACM/ICPC 沈阳 G题 Infinite Fraction Path
The ant Welly now dedicates himself to urban infrastructure. He came to the kingdom of numbers and s ...
- java之方法的参数传递(值传递和引用传递)
方法,必须有其所在类或对象调用时才有意义,若方法有参数: 形参:方法声明时的参数: 实参:方法调用时实际传给形参的参数值: java的实参如何传入方法呢? 首先要明确:变量分为两大类:基础数据类型.引 ...
- 使用CleanWebpackPlugin插件报错原因:CleanWebpackPlugin is not a constructor
// webpack版本:4.32.2 // 抛错原写法 const CleanWebpackPlugin = require("clean-webpack-plugin"); . ...