Json format data parsing process code using Jquery

Source: Internet
Author: User

Json format data parsing process code using Jquery

I learned a little about Json today. 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 + "/"; %> <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">

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; 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 ("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 !!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.