Jquery parses Json format data process code _ jquery

Json is a lightweight data exchange format. This section describes how Jquery parses Json format data. For more information, see Json, JSON (JavaScript Object Notation) is a lightweight data exchange format. Easy to read and write. It is also easy to parse and generate machines. JSON uses a completely language-independent text format, but it also uses a habit similar 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 an object, record, struct, dictionary, and hash table ), keyed list or associative array ).
An ordered list of values ). In most languages, it is understood as an array ).

These are common data structures. In fact, most modern computer languages support them in some form. This makes it possible to exchange a data format between programming languages that are also based on these structures.

JSON has the following forms:

An object is an unordered set of 'name/value' pairs. An object starts with "{" (left parenthesis) and ends with "}" (right Parenthesis. Each "name" is followed by a ":" (colon); "," (comma) is used to separate the "name/value" pairs.

Okay, let's just give an example !! This small demo is designed like this, index. access the server servlet from the jsp page, and the servlet is directed to the index. jsp transmits data in Json format... nonsense. If it is not Json-format data, I write this blog, which is equivalent to deceiving the audience!

Code on the index. jsp end (easy and difficult ):

The Code is as follows:

<% @ Page language = "java" import = "java. util. * "pageEncoding =" UTF-8 "%> <% String path = request. getContextPath (); String basePath = request. getScheme () + ": //" + request. getServerName () + ":" + request. getServerPort () + path + "/"; %> My JSP 'index. jsp 'starting page

Lastname	Firstname	Address

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

The Code is as follows:

Package com. wk; public class Person {private String firstName; private String lastName; private Address 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 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 code:

The Code is as follows:

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, incluresp) throws ServletException, IOException {resp. setContentType ("text/html; charsets = UTF-8"); List Persons = new ArrayList (); PrintWriter out = resp. getWriter ();
Person person1 = new Person (); Address a1 = new Address (); a1.setId (1); a1.setDetail ("Hebei Province"); person1.setFirstName ("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 ();
/* Assemble the string into json format * {"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 ("}},") ;}// remove the last comma from 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 );}

The following code is how Jquery parses Json data. It is also the core code of this demo:

The Code is as follows:

$ (Document ). ready (function () {$ ("table" ).css ("border-color", "lightblue" ).css ("border-style", "solid "); $ ("# head" ).css ("background-color", "lightblue"); $. ajax ({// background processing program url: "Json", // data transmission method 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" 2.16.html (per. lastname); $ ("# tr" + I ). find ("# td1" cmd.html (per. firstname); $ ("# tr" + I ). find ("# td2 "). html (per. address. detail );});}});});

Paste another running effect !!