Jquery解析Json格式數(shù)據(jù)過程代碼
今天稍微學(xué)習(xí)了一下Json,JSON (JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。 易于人閱讀和編寫。同時(shí)也易于機(jī)器解析和生成。 JSON采用完全獨(dú)立于語(yǔ)言的文本格式,但是也使用了類似于C語(yǔ)言家族的習(xí)慣(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 這些特性使JSON成為理想的數(shù)據(jù)交換語(yǔ)言。
JSON建構(gòu)于兩種結(jié)構(gòu):
“名稱/值”對(duì)的集合(A collection of name/value pairs)。不同的語(yǔ)言中,它被理解為對(duì)象(object) ,紀(jì)錄(record),結(jié)構(gòu)(struct),字典(dictionary),哈希表(hash table),有鍵列表(keyed list),或者關(guān)聯(lián)數(shù)組 (associative array)。
值的有序列表(An ordered list of values)。在大部分語(yǔ)言中,它被理解為數(shù)組(array)。
這些都是常見的數(shù)據(jù)結(jié)構(gòu)。事實(shí)上大部分現(xiàn)代計(jì)算機(jī)語(yǔ)言都以某種形式支持它們。這使得一種數(shù)據(jù)格式在同樣基于這些結(jié)構(gòu)的編程語(yǔ)言之間交換成為可能。
JSON具有以下這些形式:
對(duì)象是一個(gè)無(wú)序的“‘名稱/值'對(duì)”集合。一個(gè)對(duì)象以“{”(左括號(hào))開始,“}”(右括號(hào))結(jié)束。每個(gè)“名稱”后跟一個(gè)“:”(冒號(hào));“‘名稱/值' 對(duì)”之間使用“,”(逗號(hào))分隔。
好了還是不說(shuō)廢話了直接上例子吧??!這個(gè)小demo的設(shè)計(jì)是這樣的,index.jsp頁(yè)面訪問服務(wù)器端的servlet,servlet向index.jsp傳遞數(shù)據(jù),傳遞的數(shù)據(jù)時(shí)Json格式的,呵呵...廢話,如果不是Json格式的數(shù)據(jù)我寫這篇博客就相當(dāng)于蒙騙觀眾了!
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>
然后是兩個(gè)bean程序:Person和Address。這里設(shè)計(jì)這兩個(gè)類主要是更好的體現(xiàn)Json傳遞數(shù)據(jù)的方式和傳遞的數(shù)據(jù)格式
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("}},"); } //將最后一個(gè)逗號(hào)去掉 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數(shù)據(jù)了,也是這一個(gè)demo的核心代碼了:
$(document).ready(function() { $("table").css("border-color", "lightblue").css("border-style", "solid"); $("#head").css("background-color", "lightblue"); $.ajax({ // 后臺(tái)處理程序 url : "Json", // 數(shù)據(jù)發(fā)送方式 type : "post", // 接受數(shù)據(jù)格式 dataType : "json", timeout : 20000,// 設(shè)置請(qǐng)求超時(shí)時(shí)間(毫秒)。 // 請(qǐng)求成功后回調(diào)函數(shù)。 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); }); } }); });
再貼一個(gè)運(yùn)行效果吧??!
- jquery eval解析JSON中的注意點(diǎn)介紹
- jQuery怎么解析Json字符串(Json格式/Json對(duì)象)
- js/jquery解析json和數(shù)組格式的方法詳解
- jquery解析json格式數(shù)據(jù)的方法(對(duì)象、字符串)
- Jquery解析json字符串及json數(shù)組的方法
- jQuery解析Json實(shí)例詳解
- Jquery解析json數(shù)據(jù)詳解
- jQuery解析json數(shù)據(jù)實(shí)例分析
- jQuery解析json格式數(shù)據(jù)簡(jiǎn)單實(shí)例
- 深入分析jquery解析json數(shù)據(jù)
- jQuery解析json格式數(shù)據(jù)示例
相關(guān)文章
jquery獲取當(dāng)前點(diǎn)擊對(duì)象的value方法
這篇文章主要介紹了jquery如何獲取當(dāng)前點(diǎn)擊對(duì)象的value,需要的朋友可以參考下2014-02-02jQuery實(shí)現(xiàn)base64前臺(tái)加密解密功能詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)base64前臺(tái)加密解密功能,結(jié)合實(shí)例形式分析了jquery.base64.js實(shí)現(xiàn)前臺(tái)base64加密與解密功能的實(shí)現(xiàn)方法,并給出了java實(shí)現(xiàn)后臺(tái)base64加密解密的操作示例對(duì)比驗(yàn)證加密效果,需要的朋友可以參考下2017-08-08基于JQuery的簡(jiǎn)單實(shí)現(xiàn)折疊菜單代碼
利用JQUERY簡(jiǎn)單的實(shí)現(xiàn)功能菜單的折疊效果。本人初學(xué),寫后臺(tái)稍多一點(diǎn),很少寫前臺(tái)的效果。還請(qǐng)大蝦們多多指教。2010-09-09使用jQuery中的wrap()函數(shù)操作HTML元素的教程
wrap(),顧名思義,就是包裹的意思,就是在你所在器外層包裹一層?xùn)|西,接下來(lái)我們就詳細(xì)來(lái)看使用jQuery中的wrap()函數(shù)操作HTML元素的教程:2016-05-05Ajax異步獲取html數(shù)據(jù)中包含js方法無(wú)效的解決方法
本文主要介紹了Ajax異步獲取html數(shù)據(jù)中包含js方法無(wú)效的解決方法,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02jQuery開源組件BootstrapValidator使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery開源組件BootstrapValidator的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06jQuery解析json格式數(shù)據(jù)簡(jiǎn)單實(shí)例
這篇文章主要介紹了jQuery解析json格式數(shù)據(jù)的方法,結(jié)合實(shí)例分析了使用jQuery1.7.2版本的方法解析json格式數(shù)據(jù)的技巧,需要的朋友可以參考下2016-01-01基于jQuery實(shí)現(xiàn)的單行公告活動(dòng)輪播效果
本文通過實(shí)例代碼給大家介紹了基于jQuery實(shí)現(xiàn)的單行公告活動(dòng)輪播效果,非常不錯(cuò),代碼簡(jiǎn)單易懂,具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-08-08jQuery的ajax中使用FormData實(shí)現(xiàn)頁(yè)面無(wú)刷新上傳功能
這篇主要寫如何利用ajax和FormData實(shí)現(xiàn)頁(yè)面無(wú)刷新的文件上傳效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。需要的的朋友參考下本文2017-01-01