Jquery parses the json formatted data procedure code

  • 2020-03-30 04:08:34
  • OfStack

Today you learned a little bit about Json, which (JavaScript Object Notation) is a lightweight data interchange format. Easy to read and write. It is also easy for machines to parse and generate. JSON USES a completely language-independent text format, but also USES similar conventions to the C language family (including C, C++, C#, Java, JavaScript, Perl, Python, and so on). These features make JSON an ideal data exchange language.

JSON is constructed in two structures:

A collection of name/value pairs. In different languages, it is understood as object, record, struct, dictionary, hash table, keyed list, or associative array.
An ordered list of values. In most languages, it is understood as an array.

JSON has the following forms:

An object is an unordered collection of 'name/value' pairs. An object starts with "{" (left parenthesis) and ends with"} "(right parenthesis). Each name is followed by: (colon); "Name/value" pairs are separated by ", "(comma).

Ok still don't say nonsense to go up example directly!! The design of this little demo is like this, index.jsp page access server side servlet, servlet to index.jsp data, data transfer Json format, ah... Nonsense, I would have cheated the audience by writing this blog without Json data!

Index. JSP side of the code (easy first, difficult order) :


<%@ 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>

Then there are two bean programs: Person and Address. These two classes are designed to better reflect the way Json transmits data and the format of the data it transmits


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; } }

The servlet code:


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(" In hebei province "); person1.setFirstName(" The melon "); person1.setLastName(" silly "); person1.setAddress(a1); persons.add(person1);
Person person2 = new Person(); Address a2 = new Address(); a2.setId(2); a2.setDetail(" Jiangxi province "); person2.setFirstName(" egg "); person2.setLastName(" stupid "); person2.setAddress(a2); persons.add(person2);
Person person3 = new Person(); Address a3 = new Address(); a3.setId(1); a3.setDetail(" Hunan province "); person3.setFirstName(" chi "); person3.setLastName(" white "); person3.setAddress(a3); persons.add(person3);
bf = new StringBuffer();
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("}},"); } //Remove the last comma int length = bf.length(); String newStr = bf.substring(0, leng-1); Bf = new StringBuffer (); Bf. Append (newStr); < br / > bf.append("]}"); out.println(bf); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp); }

The following code is how Jquery parses Json data, which is the core of this demo:


$(document).ready(function() { $("table").css("border-color", "lightblue").css("border-style", "solid"); $("#head").css("background-color", "lightblue"); $.ajax({ // Background handler url : "Json", // Data sending mode type : "post", // Accept data format dataType : "json", timeout : 20000,// Set the request timeout in milliseconds. // Callback function after successful request. 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); }); } }); });

Paste a running effect again!!


Related articles: