Jquery解析json
程序员文章站
2022-06-09 18:25:43
...
jQuery解析JSON，通过异步调用的方式从服务器端获取对象，并以Json格式显示在客户端
1、jsp
2、服务器端的servlet
3、对应的bean有：
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;
}
}
上一篇： 如何实现双（多）语种网站内容的国际化？
下一篇： Openwrt入门 之 初识Luci