Jquery解析Json格式数据过程代码_jquery

今天稍微学习了一下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 "/"; %>

lastname	firstname	address

然后是两个bean程序：Person和Address。这里设计这两个类主要是更好的体现Json传递数据的方式和传递的数据格式

复制代码 代码如下:

包com.wk；公共类人{私有字符串名字;私有字符串姓氏；私人地址地址；公共人（）{超级（）; } public Person（字符串名字，字符串姓氏，地址地址）{ super（）; this.firstName = 名字; this.lastName = 姓氏；这个地址=地址； } public String getFirstName() { return firstName; } } public void setFirstName(String firstName) { this.firstName = firstName; } public String getLastName() { 返回姓氏; } public void setLastName(String lastName) { this.lastName = lastName; } 公共地址 getAddress() { 返回地址; } public void setAddress(Address 地址) { this.address = 地址; } } 包 com.wk;公共类地址{私有int id;私有字符串详细信息；公共地址（）{ 超级（）; } 公共地址（int id，字符串详细信息）{ super（）;这个.id = id; this.detail = 详细信息； } public int getId() { 返回 id; } public void setId(int id) { this.id = id; } public String getDetail() { 返回详细信息； } public void setDetail(String详细信息) { this.detail =详细信息; } }

servlet代码：

复制代码代码如下：

包com.servlet；导入java.io.IOException；导入 java.io.PrintWriter;导入java.util.ArrayList；导入java.util.List；导入 javax.servlet.ServletException;导入 javax.servlet.http.HttpServlet;导入 javax.servlet.http.HttpServletRequest;导入 javax.servlet.http.HttpServletResponse;导入com.wk.地址；导入 com.wk.Person；公共类PersonServlet扩展了HttpServlet{私有静态最终长serialVersionUID = 1L;静态 StringBuffer bf； @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/html;charset=utf-8");列表 people = new ArrayList(); PrintWriter out = resp.getWriter();
人 person1 = new Person();地址a1 = 新地址(); a1.setId(1); a1.setDetail("河北省"); person1.setFirstName("瓜"); person1.setLastName("傻"); person1.setAddress(a1); people.add(person1);
人 person2 = new Person();地址a2 = 新地址(); a2.setId(2); a2.setDetail("江西省"); person2.setFirstName("蛋"); person2.setLastName("笨"); person2.setAddress(a2); people.add(person2);
人 person3 = new Person();地址a3 = 新地址(); a3.setId(1); a3.setDetail("湖南省"); person3.setFirstName("痴"); person3.setLastName("白"); person3.setAddress(a3); people.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":"").追加（person.getLastName（））。追加（“”，“）。追加(""地址":").append("{"id":"").append(person.getAddress().getId()).append("","").append("详细信息": "").append(person.getAddress().getDetail()).append(""").append("}},"); } //将最后一个逗号去掉 int length = bf.length(); String newStr = bf.substring(0, 长度-1); bf = 新的 StringBuffer(); bf.append(newStr);
bf.append("]}");输出.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); ; });

再贴一个运行效果吧！！