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


Posted in Javascript onOctober 17, 2014

今天稍微学习了一下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); }); } }); });

再贴一个运行效果吧!!
Javascript 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 #Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 #Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 #Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 #Javascript
js实现飞入星星特效代码
Oct 17 #Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 #Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 #Javascript
You might like
php模板原理讲解
2013/11/13 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
浅谈Vue 数据响应式原理
2018/05/07 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
vue router动态路由设置参数可选问题
2019/08/21 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
py中的目录与文件判别代码
2008/07/16 Python
Python实现求数列和的方法示例
2018/01/12 Python
深入理解Django的中间件middleware
2018/03/14 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python文件操作的简单方法总结
2019/11/07 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Python hashlib模块实例使用详解
2019/12/24 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
五年级音乐教学反思
2014/02/06 职场文书
矿泉水广告词
2014/03/20 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
入党政审材料范文
2014/12/24 职场文书
学前班语言教学计划
2015/01/20 职场文书
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript