欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Jquery解析json

程序员文章站 2022-06-09 18:25:43
...
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