Jquery解析json

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

猜你喜欢