jQuery解析JSON，通过异步调用的方式从服务器端获取对象，并以Json格式显示在客户端
1、jsp
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.post("GsonServlet",{},function(returnedData,status){
var html = "<table width='50%' border='1' align='center'><tr><th>id</th><th>name</th><th>age</th><th>homeAddress</th><th>companyAddress</th></tr>";
for(var i = 0;i<returnedData.length;i++){
var people = returnedData[i];
html += "<tr><td>"+people.id+"</td><td>"+people.name+"</td><td>"+people.age+"</td><td>"+people.address.homeAddress+"</td><td>"+people.address.companyAddress+"</td></tr>";
}
html += "</table>";
$("#theBody table:eq(0)").remove();
$("#theBody").append(html);
});
});
});
</script>
</head>
<body id="theBody">
<input type="button" name="button" id="btn" value="Get Gson from Server">
</body>
2、服务器端的servlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
List<People> list = new ArrayList<People>();
//创建第一个人
People people1 = new People();
Address address1 = new Address();
address1.setHomeAddress("Anhui");
address1.setCompanyAddress("Shanghai");
people1.setId(1);
people1.setName("James");
people1.setAge(29);
people1.setAddress(address1);
People people12 = new People();
people12.setId(11);
people12.setName("laowang);
people12.setAge(30);
People people13 = new People();
people13.setId(12);
people13.setName("laoliu");
people13.setAge(35);
List<People> list1 = new ArrayList<People>();
list1.add(people12);
list1.add(people13);
people1.setList(list1);
//创建第二个人
People people2 = new People();
Address address2 = new Address();
address2.setHomeAddress("香港");
address2.setCompanyAddress("新加坡");
people2.setId(2);
people2.setName("刘德华");
people2.setAge(50);
people2.setAddress(address2);
People people21 = new People();
people21.setId(21);
people21.setName("张学友");
people21.setAge(45);
People people22 = new People();
people22.setId(22);
people22.setName("张惠妹");
people22.setAge(100);
List<People> list2 = new ArrayList<People>();
list2.add(people21);
list2.add(people22);
people2.setList(list2);
list.add(people1);
list.add(people2);
Gson gson = new Gson();
String result = gson.toJson(list);
System.out.println(result);
response.setContentType("application/json; charset=utf-8");
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
PrintWriter out = response.getWriter();
out.println(result);
out.flush();
}
3、对应的bean有：
package com.lee.bean;
import java.util.List;
public class People {
private int id;
private String name;
private int age;
private Address address;
private List<People> list;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public Address getAddress() {
return address;
}
public void setAddress(Address address) {
this.address = address;
}
public List<People> getList() {
return list;
}
public void setList(List<People> list) {
this.list = list;
}
}
=========================
package com.lee.bean;
public class Address {
private String homeAddress;
private String companyAddress;
public String getHomeAddress() {
return homeAddress;
}
public void setHomeAddress(String homeAddress) {
this.homeAddress = homeAddress;
}
public String getCompanyAddress() {
return companyAddress;
}
public void setCompanyAddress(String companyAddress) {
this.companyAddress = companyAddress;
}
}
分享到：
相关推荐
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里...
在JavaScript和jQuery中，解析JSON数据是常见的任务，特别是在与服务器进行异步通信时。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成。在jQuery中...
### Jquery解析json #### 知识点概览 1. **JSON介绍** 2. **jQuery与JSON数据交互** 3. **Struts2框架简介** 4. **JSON类库的选择与使用** 5. **服务器端Java程序编写** 6. **前端jQuery解析JSON数据** #### JSON...
在IT行业中，JavaScript库jQuery是前端开发中...以上就是关于“使用jQuery解析JSON字符串”这一主题的详细讲解，涵盖了JSON的基础知识、jQuery的解析方法以及动态更新DOM的内容。希望对您在实际项目中的应用有所帮助。
最近被jquery折磨了一番，倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集，将dataSet转换成json并返回给客户端，客户端用jquery getJson方法解析出来并显示在页面上。...
本主题将深入探讨如何使用jQuery解析JSON数据并实现级联菜单，这在构建动态和交互性强的用户界面时非常常见。级联菜单通常用于导航，其中下拉选项根据上一个选项的选择而变化，提供更具体的子类别。 首先，让我们...
在本话题中，我们将深入探讨如何使用jQuery解析JSON数据，这在现代Web应用中是一个非常重要的技能，因为JSON（JavaScript Object Notation）已经成为数据交换的标准格式。 JSON是一种轻量级的数据交换格式，它易于...
本文将详细讲解如何使用jQuery解析JSON和XML数据，通过给出的文件名称，我们可以推测这是一个关于Web应用中添加账户和应用的场景。 首先，让我们来看看JSON（JavaScript Object Notation）和XML（eXtensible Markup...
在JavaScript和jQuery中，解析JSON数据是常见的任务，特别是在与服务器进行异步通信时。JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，它使得人和机器都能容易地读取和写入数据。当jQuery从服务器...
jQuery解析JSON主要涉及到两个关键函数：`$.parseJSON()` 和 `$.getJSON()`。这两个函数是jQuery提供用于处理JSON数据的核心工具。 1. `$.parseJSON()`: 这个函数用于将一个JSON字符串转换为JavaScript对象。例如，...
本文实例讲述了jquery解析json格式数据的方法。分享给大家供大家参考，具体如下： json数据是我们常用的一种小型的数据实时交换的一个东西，他可以利用jquery或js进行解析，下面我来介绍jquery解析json字符串方法。 ...
在早期版本的jQuery中，`jQuery.parseJSON()`函数用于将JSON字符串解析为JavaScript对象。然而，随着JSON支持成为JavaScript语言标准的一部分，现代浏览器都内置了`JSON.parse()`方法，这通常被认为更安全且推荐使用...
当用户选择省份后，jQuery会发送Ajax请求到服务器，服务器使用SSH框架处理请求，查询数据库并返回JSON格式的城市数据，最后jQuery解析JSON并在前端更新城市选择框。 总结来说，这个压缩包提供的示例是一个基于SSH...
这篇博客将探讨如何使用 jQuery 解析和操作 JSON 数据。 首先，我们需要了解 JSON 的基本结构。JSON 是基于 JavaScript 语法的，它由键值对（key-value pairs）组成，可以是对象或数组。例如： ```json { "name":...
让我们深入探讨jQuery如何解析JSON。 首先，理解JSON的结构至关重要。JSON是一种文本格式，用于存储和传输数据，它的语法基于JavaScript对象语法。一个JSON对象通常由键值对组成，键用双引号包围，后面跟着冒号，...
本文主要介绍了如何利用jQuery解析JSON数据，并通过实例详细阐述了在前端页面中利用jQuery处理从服务器端通过Servlet返回的JSON格式数据的具体方法。以下将结合提供的内容，具体介绍相关的知识点： 1. JSON数据格式...
关于"jQuery读取json数据"这个主题，我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据，以及这样做带来的优势。 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于...
本文实例讲述了jQuery解析json格式数据的方法。分享给大家供大家参考，具体如下： 我用的jquery版本是1.7.2，整合了json数据的解析功能，很早的版本是没有的，我记得那个时候，要么用js的for in来读取json字符串里面...
5. jQuery演示实例：文档中提到了几个实例，通过这些实例可以更加直观地理解jQuery解析JSON的各种方法和技巧，这些实例在文中提到的JqueryDemo.html文件中可以找到。 在处理JSON数据时，开发者应该始终牢记数据的...
本文实例讲述了Jquery解析json字符串及json数组的方法。分享给大家供大家参考。具体如下： <!doctype html> <html> <head> <meta charset="utf-8"> [removed][removed] </head> <...