`

Jquery解析json

jqueryjson 
阅读更多
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解析JSON数据的方法

    用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里...

    用jquery解析JSON数据的方法20110227

    用jquery解析JSON数据的方法20110227用jquery解析JSON数据的方法20110227

    jquery解析JSON数据的方法.docx

    jquery解析JSON数据的方法.docx

    Jquery解析json数据详解

    最近被jquery折磨了一番，倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集，将dataSet转换成json并返回给客户端，客户端用jquery getJson方法解析出来并显示在页面上。...

    jquery解析json

    jquery解析json

    jQuery解析json

    jQuery解析json的一些代码片段，学习jQuery使用方法

    使用JQUery解析JSON字符串

    从服务器端获取一段JSON字符串，使用就jQuery解析该字符串，并动态添加到列表

    Jquery解析Json数据，实现级联菜单

    jquery操作Dom对象，解析json数据，实现级联菜单，里面用到了事件绑定

    jquery解析json格式数据的方法(对象、字符串)

    本文实例讲述了jquery解析json格式数据的方法。分享给大家供大家参考，具体如下： json数据是我们常用的一种小型的数据实时交换的一个东西，他可以利用jquery或js进行解析，下面我来介绍jquery解析json字符串方法。 ...

    jQuery解析json格式数据示例

    主要介绍了jQuery解析json格式数据,涉及jQuery针对json格式数据元素遍历相关操作技巧,需要的朋友可以参考下

    jQuery解析json数据实例分析

    主要介绍了jQuery解析json数据的具体实现方法,结合实例形式较为详细的分析了jQuery解析json格式数据的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    jQuery解析json格式数据简单实例

    主要介绍了jQuery解析json格式数据的方法,结合实例分析了使用jQuery1.7.2版本的方法解析json格式数据的技巧,需要的朋友可以参考下

    Jquery解析Json数据

    NULL 博文链接：https://zmfkplj.iteye.com/blog/350694

    Jquery解析JSON和XML示例

    NULL 博文链接：https://fley.iteye.com/blog/1897154

    Jquery解析json字符串及json数组的方法

    本文实例讲述了Jquery解析json字符串及json数组的方法。分享给大家供大家参考。具体如下： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; [removed][removed] &lt;/head&gt; &lt;...

    jQuery解析Json实例详解

    主要介绍了jQuery解析Json的方法,结合实例形式较为详细的分析了jQuery针对json的常用解析与转换技巧,具有一定参考借鉴价值,需要的朋友可以参考下

Magicbox
Global site tag (gtag.js) - Google Analytics