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对象换 ...
随机推荐
- phpStorm自动生成___jb_tmp___文件
把这个去掉就可以了
- 面试一个小公司,TPM相关概念
准备面试一个小公司,在面试邀请邮件中提出了这样一个要求(not required): ".. one item we will likely discuss with you is soft ...
- NB-IoT将成为未来5G物联网主流技术
日前,我国完成了IMT-2020(5G)候选技术方案的完整提交.据悉,在提交的方案中,NB-IoT技术被正式纳入5G候选技术集合,预计2020年6月ITU将正式宣布5G技术方案的诞生.而NB-IoT也 ...
- Nginx 404 Not Found 解决办法
环境:宝塔Nginx面板 解决办法: 宝塔面板--站点设置-配置文件. 去掉: error_page 404 /404.html; 前面的 # 号.
- JavaEE基础(02):Servlet核心API用法详解
本文源码:GitHub·点这里 || GitEE·点这里 一.核心API简介 1.Servlet执行流程 Servlet是JavaWeb的三大组件之一(Servlet.Filter.Listener) ...
- 洛谷 题解 P1684 考验
本蒟蒻又来发题解啦! 这个题的正解应该是贪心 直接找题目的关键: 韵脚只可能是 "AABB", "ABAB", "ABBA" 和" ...
- 大数据之Linux基础
回顾这一个多月以来闭关学大数据的一些相关重要知识,就当复习,顺便以备以后查看 Linux学习第一步自然是安装Linux. 关于Linux 首先介绍下Linux,Linux系统很多程序员开发者其实都耳熟 ...
- POJ 2186 Popular cows(SCC 缩点)
Every cow's dream is to become the most popular cow in the herd. In a herd of N (1 <= N <= 10, ...
- 小白学 Python 爬虫(18):Requests 进阶操作
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...
- K3cloud、erp系统实时滚动展示未处理数据,监控投诉处理进度
痛点:企业内部erp人工记录产品投诉销售单,是否跟踪处理完客户投诉,结果不能实时透明,当天还有多少未解决的投诉单,也不能实时查看到,除非手工去系统单据查询,很不方便,跟踪也不顺畅! 解决方案:利 ...