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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
二行代码解决全部网页木马
Mar 28 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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模板技术[转]
2007/01/04 PHP
php HandlerSocket的使用
2011/05/02 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
PHP7 新增功能
2021/03/09 PHP
javascript 函数调用规则
2009/08/26 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
详解如何较好的使用js
2016/12/16 Javascript
js实现密码强度检验
2017/01/15 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
Javascript实现基本运算器
2017/07/15 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
Python 文件重命名工具代码
2009/07/26 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
python实现五子棋游戏
2019/06/18 Python
django解决订单并发问题【推荐】
2019/07/31 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
python matlab库简单用法讲解
2020/12/31 Python
纽约海:Sea New York
2018/11/04 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
中学教师岗位职责
2013/11/26 职场文书
质量月活动总结
2014/08/26 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
简易版租房协议书范本
2014/10/13 职场文书
狂人日记读书笔记
2015/06/30 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
尝试使用Python爬取城市租房信息
2022/04/12 Python