Jquery解析Json格式数据
今天稍微学习了一下Json,JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这些特性使JSON成为理想的数据交换语言。
JSON建构于两种结构:
- “名称/值”对的集合(A collection of name/value pairs)。不同的语言中,它被理解为对象(object) ,纪录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组 (associative array)。
- 值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。
这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。
JSON具有以下这些形式:
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。
好了还是不说废话了直接上例子吧!!这个小demo的设计是这样的,index.jsp页面访问服务器端的servlet,servlet向index.jsp传递数据,传递的数据时Json格式的,呵呵...废话,如果不是Json格式的数据我写这篇博客就相当于蒙骗观众了!
index.jsp端的代码(先易后难的顺序):
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css" mce_href="styles.css"> --> <mce:script type="text/javascript" src="js/jquery-1.3.2.js" mce_src="js/jquery-1.3.2.js"></mce:script> <mce:script type="text/javascript" src="js/login.js" mce_src="js/login.js"></mce:script> </head> <body> <table> <tr id="head"> <td>lastname</td> <td>firstname</td> <td>address</td> </tr> <tr id="tr0"> <td id="td0"></td> <td id="td1"></td> <td id="td2"></td> </tr> <tr id="tr1"> <td id="td0"></td> <td id="td1"></td> <td id="td2"></td> </tr> <tr id="tr2"> <td id="td0"></td> <td id="td1"></td> <td id="td2"></td> </tr> </table> </body> </html>
然后是两个bean程序:Person和Address。这里设计这两个类主要是更好的体现Json传递数据的方式和传递的数据格式
- package com.wk; public class Person { private String firstName; private String lastName; private Address address; public Person() { super(); } public Person(String firstName, String lastName, Address address) { super(); this.firstName = firstName; this.lastName = lastName; this.address = address; } public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } public String getLastName() { return lastName; } public void setLastName(String lastName) { this.lastName = lastName; } public Address getAddress() { return address; } public void setAddress(Address address) { this.address = address; } } package com.wk; public class Address { private int id; private String detail; public Address() { super(); } public Address(int id, String detail) { super(); this.id = id; this.detail = detail; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getDetail() { return detail; } public void setDetail(String detail) { this.detail = detail; } }
servlet代码:
- package com.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.wk.Address; import com.wk.Person; public class PersonServlet extends HttpServlet{ private static final long serialVersionUID = 1L; static StringBuffer bf; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/html;charset=utf-8"); List<Person> persons = new ArrayList<Person>(); PrintWriter out = resp.getWriter();
- Person person1 = new Person(); Address a1 = new Address(); a1.setId(1); a1.setDetail("河北省"); person1.setFirstName("瓜"); person1.setLastName("傻"); person1.setAddress(a1); persons.add(person1);
- Person person2 = new Person(); Address a2 = new Address(); a2.setId(2); a2.setDetail("江西省"); person2.setFirstName("蛋"); person2.setLastName("笨"); person2.setAddress(a2); persons.add(person2);
- Person person3 = new Person(); Address a3 = new Address(); a3.setId(1); a3.setDetail("湖南省"); person3.setFirstName("痴"); person3.setLastName("白"); person3.setAddress(a3); persons.add(person3);
- bf = new StringBuffer();
- /* 组装成json格式的字符串 * {"person":[ * {"firstname":"", "lastNmae":"", "address": {"id":"", "detail":""}}, * ]} */ bf.append("{\"person\":["); for(Person person : persons) { bf.append("{\"firstname\":\"").append(person.getFirstName()).append("\",\""). append("lastname\":\"").append(person.getLastName()).append("\","). append("\"address\":").append("{\"id\":\"").append(person.getAddress().getId()).append("\",\""). append("detail\":\"").append(person.getAddress().getDetail()).append("\"").append("}},"); } //将最后一个逗号去掉 int length = bf.length(); String newStr = bf.substring(0, length-1); bf = new StringBuffer(); bf.append(newStr);
- bf.append("]}"); out.println(bf); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp); }
- }
下面的代码就是Jquery如何解析Json数据了,也是这一个demo的核心代码了:
- $(document).ready(function() { $("table").css("border-color", "lightblue").css("border-style", "solid"); $("#head").css("background-color", "lightblue"); $.ajax({ // 后台处理程序 url : "Json", // 数据发送方式 type : "post", // 接受数据格式 dataType : "json", timeout : 20000,// 设置请求超时时间(毫秒)。 // 请求成功后回调函数。 success : function(dataObj) { var member = eval(dataObj); // alert(member.person[1].firstname); $(dataObj.person).each(function(i, per) { $("#tr" + i).find("#td0").html(per.lastname); $("#tr" + i).find("#td1").html(per.firstname); $("#tr" + i).find("#td2") .html(per.address.detail); }); } }); });
再贴一个运行效果吧!!
呵呵....共同学习共同进步!!!!!!!
Jquery解析Json格式数据的更多相关文章
- 解析json格式数据
实现目标 读取文件中的json格式数据,一行为一条json格式数据.进行解析封装成实体类. 通过google的Gson对象解析json格式数据 我现在解析的json格式数据为: {",&qu ...
- 实现android上解析Json格式数据功能
实现android上解析Json格式数据功能,该源码转载于安卓教程网的,http://android.662p.com ,个人感觉还不错的,大家可以看看一下吧. package com.practic ...
- 用GSON解析Json格式数据
GSON是谷歌提供的开源库,用来解析Json格式的数据,非常好用.如果要使用GSON的话,则要先下载gson-2.2.4.jar这个文件,如果是在Android项目中使用,则在Android项目的li ...
- jQuery获取JSON格式数据方法
getJSON方法: jQuery.getJSON(url,data,success(data,status,xhr)) $("button").click(function(){ ...
- $Java-json系列(一):用GSON解析Json格式数据
GSON是谷歌提供的开源库,用来解析Json格式的数据,非常好用.如果要使用GSON的话,则要先下载gson-2.2.4.jar这个文件,如果是在Android项目中使用,则在Android项目的li ...
- ObjectMapper用于将java对象转换为json格式数据以及JSONObject对象解析json格式数据
ObjectMapper objectMapper = new ObjectMapper(); //反序列化的时候如果多了其他属性,不抛出异常 objectMapper.configure(Deser ...
- C# 解析JSON格式数据
JSON简介 JSON(全称为JavaScript ObjectNotation) 是一种轻量级的数据交换格式.它是基于JavaScript语法标准的一个子集.JSON采用完全独立于语言的文本格式,可 ...
- Android 解析JSON格式数据
比起XML,JSON主要优势在于它的体积更小,在网络上传输的时候可以更省流量.但缺点在于,它的语义性较差,显示不如XML直观. JSON格式 : { "name_A" : &qu ...
- 【转】C# 解析JSON格式数据
http://blog.csdn.net/coolszy/article/details/8606803 JSON简介 JSON(全称为JavaScript ObjectNotation) 是一种轻量 ...
随机推荐
- 磁盘清理-安全转移C盘中软件的缓存文件
C盘飘红啦~~~ 安装软件时,默认会安装到C盘,并不会特意去改(尤其C盘是固态硬盘时).或者,根本就没有给你修改的机会. 可是啊,有些软件的缓存数据目录会比较大,实在太占C盘空间.想移出去,但又不想重 ...
- Jvm内存区域和GC
运行时数据区域 线程私有 程序计数器 正在执行的字节码指令的地址(native方法时为undefined) Java虚拟机栈 存储栈帧(局部变量表,操作数栈,动态链接,方法出口)OOM,StackOv ...
- Kubernetes(k8s)集群部署(k8s企业级Docker容器集群管理)系列之集群部署环境规划(一)
0.前言 整体架构目录:ASP.NET Core分布式项目实战-目录 k8s架构目录:Kubernetes(k8s)集群部署(k8s企业级Docker容器集群管理)系列目录 一.环境规划 软件 版本 ...
- Linux安装系统选择 日报 18/06/23
Linux安装系统选择 Centos7 程序体积7个G,如果是学习伊始, 注意不要选择那个体积小的,因为我装过之后进去发现这个wifie还要自己进行一些烈的命令才能连接成功.很麻烦的. 安装比较顺利但 ...
- KVM libvirt的CPU热添加
一. NUMA1. NUMA 介绍 早期的时候,每台服务器都是单CPU,随着技术的发展,出现了多CPU共同工作的需求. NUMA(Non-Uniform Memory Access,非一致 ...
- 从Table 表中取出第 m 条到第 n 条的记录
* FROM Table id FROM Table )) --从TABLE表中取出第m到n条记录 (Exists版本) * FROM TABLE AS a WHERE Not Exists ( * ...
- ?P<username>\w+
- 【assembly】用汇编写的一个BMP图片读取器
;----------------------------- ;文件满足256色调的 ;----------------------------- Stack Segment ...
- Codeforces Round #358 (Div. 2) B. Alyona and Mex 水题
B. Alyona and Mex 题目连接: http://www.codeforces.com/contest/682/problem/B Description Someone gave Aly ...
- CSS选择器复习
通用选择器:* 选择到所有的元素 选择子元素:> 选择到元素的直接后代(第一级子元素) 相邻兄弟选择器:+ 选择到紧随目标元素后的第一个元素 普通兄弟选择器:~ 选择到紧随其后的所有兄弟元素 伪 ...