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 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 Javascript
前端如何实现动画过渡效果
Feb 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php 多个submit提交表单 处理方法
2009/07/07 PHP
Symfony生成二维码的方法
2016/02/04 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python实现识别手写数字大纲
2018/01/29 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python 解压pkl文件的方法
2018/10/25 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
python二进制文件的转译详解
2019/07/03 Python
python向图片里添加文字
2019/11/26 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
python Tornado框架的使用示例
2020/10/19 Python
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
上海奥佳笔试题面试题
2016/11/16 面试题
环保项目建议书
2014/08/26 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
团员自我评价范文
2015/03/10 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
安全教育培训心得体会
2016/01/15 职场文书