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数据的更多相关文章

  1. Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 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 ...

  3. AJAX 跨域请求 - JSONP获取JSON数据

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  4. ajax请求解析springmvc返回的json数据

    需要使用的框架 spring3.0 jquery1.9.0(简化ajax开发的js库) Jackson(json处理器):jackson-core-asl-1.9.2.jar,jackson-mapp ...

  5. [ 转 ]jquery的ajax和getJson跨域获取json数据

    目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...

  6. 【转】AJAX 跨域请求 - JSONP获取JSON数据

    来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...

  7. jquery的ajax和getJson跨域获取json数据

    目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...

  8. ASP.NET前台table通过Ajax获取绑定后台查询的json数据

    上一篇<ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据>写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询.接下来就写一个前台table通过ajax  J ...

  9. java-生成任意格式的json数据

    最近研究java的东西.之前靠着自己的摸索,实现了把java对象转成json格式的数据的功能,返回给前端.当时使用的是 JSONObject.fromObject(object) 方法把java对象换 ...

随机推荐

  1. phpStorm自动生成___jb_tmp___文件

    把这个去掉就可以了

  2. 面试一个小公司,TPM相关概念

    准备面试一个小公司,在面试邀请邮件中提出了这样一个要求(not required): ".. one item we will likely discuss with you is soft ...

  3. NB-IoT将成为未来5G物联网主流技术

    日前,我国完成了IMT-2020(5G)候选技术方案的完整提交.据悉,在提交的方案中,NB-IoT技术被正式纳入5G候选技术集合,预计2020年6月ITU将正式宣布5G技术方案的诞生.而NB-IoT也 ...

  4. Nginx 404 Not Found 解决办法

    环境:宝塔Nginx面板 解决办法: 宝塔面板--站点设置-配置文件. 去掉:   error_page 404 /404.html; 前面的 # 号.

  5. JavaEE基础(02):Servlet核心API用法详解

    本文源码:GitHub·点这里 || GitEE·点这里 一.核心API简介 1.Servlet执行流程 Servlet是JavaWeb的三大组件之一(Servlet.Filter.Listener) ...

  6. 洛谷 题解 P1684 考验

    本蒟蒻又来发题解啦! 这个题的正解应该是贪心 直接找题目的关键: 韵脚只可能是 "AABB", "ABAB", "ABBA" 和" ...

  7. 大数据之Linux基础

    回顾这一个多月以来闭关学大数据的一些相关重要知识,就当复习,顺便以备以后查看 Linux学习第一步自然是安装Linux. 关于Linux 首先介绍下Linux,Linux系统很多程序员开发者其实都耳熟 ...

  8. 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, ...

  9. 小白学 Python 爬虫(18):Requests 进阶操作

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  10. K3cloud、erp系统实时滚动展示未处理数据,监控投诉处理进度

     痛点:企业内部erp人工记录产品投诉销售单,是否跟踪处理完客户投诉,结果不能实时透明,当天还有多少未解决的投诉单,也不能实时查看到,除非手工去系统单据查询,很不方便,跟踪也不顺畅!   解决方案:利 ...