jquery parse JSON format data process code

Source: Internet
Author: User
Tags data structures hash json stringbuffer

I learned a little bit today. Json,json (JavaScript Object notation) is a lightweight data interchange format. Easy for people to read and write. It is also easy to machine parse and generate. JSON uses a completely language-independent text format, but it also uses a family of C-language (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 (A collection of name/value pairs). In different languages, it is understood as objects (object), records (record), structure (struct), dictionaries (dictionary), hash tables (hash table), a list of keys (keyed list), or associative arrays (associative Array).
The ordered list of values (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 way. This makes it possible for a data format to be exchanged between programming languages that are also based on these constructs.

JSON has the following forms:

Object is an unordered set of ' name/value pairs '. An object begins with "{" (opening parenthesis), and "}" (closing parenthesis) ends. Each "name" is followed by a ":" (a colon), and the ' name/value ' pair is separated by a ', ' (comma).

Well, let's not talk nonsense directly on the example bar!! This small demo design is like this, index.jsp page access to the server side of the Servlet,servlet to index.jsp pass data, pass the data JSON format, hehe ... Nonsense, if not JSON-formatted data I write this blog is equivalent to deceive the audience!

index.jsp-End code (first easy and difficult to order):

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" > <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> & lt;/tr> </table> </body> </html>


Then there are two bean programs: person and address. The design of these two classes here is primarily a better representation of how JSON passes data and the data format it passes

The

code is as follows:


Package com.wk; public class Person {private string firstName private string lastName, private address, public person () {Super ( ); (String firstName, String lastName, address) {super (); this.firstname = firstName; this.lastname = LastName; this.address = address; Public String Getfirstname () {return firstName.} public void Setfirstname (String firstName) {this.firstname = Firstna Me Public String Getlastname () {return lastName.} public void Setlastname (String lastName) {this.lastname = LastName;} Public Address getaddress () {return address;} public void setaddress (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) {thi S.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, HttpServletResponse resp) throws Servletexception, IOException {RE Sp.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 ("foolish"); Person3.setlastname ("white"); Person3.setaddress (A3); Persons.add (Person3);


bf = new StringBuffer ();


/* Assembled in JSON format string * {"Person": [* {"FirstName": "", "Lastnmae": "", "", "" "", "" "" "" "" "" "", "" "" "" "," "" "" "," "" " 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, 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 and is the core code for 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 ({///spooler URL: JSON,//Data send by Type: "POST",///Accept Data Format DataType: "JSON", timeout:20000,//set Request timeout (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); }); } }); });


Then put a running effect on it!!

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.