Jquery parsing Json format data process code_jquery

Today I learned a little bit about Json. JSON (JavaScript Object Notation) is a lightweight data exchange format. Easy for humans 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 conventions similar to the C language family (including C, C, C#, Java, JavaScript, Perl, Python, etc.). These properties make JSON an ideal data exchange language.

JSON is constructed from two structures:

A collection of name/value pairs. In different languages, it is understood as an object, a record, a struct, a dictionary, a hash table, a keyed list, or an associative array. 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 for a data format to be exchanged between programming languages ​​that are also based on these structures.

JSON has the following forms:

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

Okay, let’s not talk nonsense and go straight to examples! ! The design of this small demo is like this. The index.jsp page accesses the server-side servlet. The servlet transfers data to index.jsp. The transferred data is in Json format. Haha... Nonsense. If the data is not in Json format, I will write this article. A blog is equivalent to deceiving the audience!

Code on the index.jsp side (easy first, then difficult order):

Copy code 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 "/"; %> < html> < ;td id="td0"> < ;/table>

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

Copy code The code is as follows:

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 persons = new ArrayList(); 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("}},"); } //将最后一个逗号去掉 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数据了，也是这一个demo的核心代码了：

复制代码 代码如下:

$(document).ready(function() { $("table").css("border-color", "lightblue").css("border-style", "solid"); $("#head").css("background-color", "lightblue"); $.ajax({ // 后台处理程序 url : "Json", // 数据发送方式 type : "post", // 接受数据格式 dataType : "json", timeout : 20000,// 设置请求超时时间（毫秒）。 // 请求成功后回调函数。 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); }); } }); });

再贴一个运行效果吧！！

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use a tag to automatically parse URL analysis URL examples_javascript skillsNext article：Use a tag to automatically parse URL analysis URL examples_javascript skills

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved

lastname	firstname	address
< ;/td>