Jquery解析json-CSDN博客

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;
 }


}