`

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

    在JavaScript和jQuery中，解析JSON数据是常见的任务，特别是在与服务器进行异步通信时。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成。在jQuery中...

    使用JQUery解析JSON字符串

    在IT行业中，JavaScript库jQuery是前端开发中...以上就是关于“使用jQuery解析JSON字符串”这一主题的详细讲解，涵盖了JSON的基础知识、jQuery的解析方法以及动态更新DOM的内容。希望对您在实际项目中的应用有所帮助。

    Jquery解析json数据详解

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

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

    本主题将深入探讨如何使用jQuery解析JSON数据并实现级联菜单，这在构建动态和交互性强的用户界面时非常常见。级联菜单通常用于导航，其中下拉选项根据上一个选项的选择而变化，提供更具体的子类别。 首先，让我们...

    Jquery解析Json数据

    在本话题中，我们将深入探讨如何使用jQuery解析JSON数据，这在现代Web应用中是一个非常重要的技能，因为JSON（JavaScript Object Notation）已经成为数据交换的标准格式。 JSON是一种轻量级的数据交换格式，它易于...

    Jquery解析JSON和XML示例

    本文将详细讲解如何使用jQuery解析JSON和XML数据，通过给出的文件名称，我们可以推测这是一个关于Web应用中添加账户和应用的场景。 首先，让我们来看看JSON（JavaScript Object Notation）和XML（eXtensible Markup...

    jquery解析JSON数据的方法.docx

    在JavaScript和jQuery中，解析JSON数据是常见的任务，特别是在与服务器进行异步通信时。JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，它使得人和机器都能容易地读取和写入数据。当jQuery从服务器...

    jquery解析json

    jQuery解析JSON主要涉及到两个关键函数：`$.parseJSON()` 和 `$.getJSON()`。这两个函数是jQuery提供用于处理JSON数据的核心工具。 1. `$.parseJSON()`: 这个函数用于将一个JSON字符串转换为JavaScript对象。例如，...

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

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

    Jquery.json.js

    在早期版本的jQuery中，`jQuery.parseJSON()`函数用于将JSON字符串解析为JavaScript对象。然而，随着JSON支持成为JavaScript语言标准的一部分，现代浏览器都内置了`JSON.parse()`方法，这通常被认为更安全且推荐使用...

    SSH+jQuery+json 实现的Ajax操作，绝对精华，代码简练清晰，绝对能看明白

    当用户选择省份后，jQuery会发送Ajax请求到服务器，服务器使用SSH框架处理请求，查询数据库并返回JSON格式的城市数据，最后jQuery解析JSON并在前端更新城市选择框。 总结来说，这个压缩包提供的示例是一个基于SSH...

    JQuery操作json的例子

    这篇博客将探讨如何使用 jQuery 解析和操作 JSON 数据。 首先，我们需要了解 JSON 的基本结构。JSON 是基于 JavaScript 语法的，它由键值对（key-value pairs）组成，可以是对象或数组。例如： ```json { "name":...

    jQuery解析json

    让我们深入探讨jQuery如何解析JSON。 首先，理解JSON的结构至关重要。JSON是一种文本格式，用于存储和传输数据，它的语法基于JavaScript对象语法。一个JSON对象通常由键值对组成，键用双引号包围，后面跟着冒号，...

    jQuery解析json数据实例分析

    本文主要介绍了如何利用jQuery解析JSON数据，并通过实例详细阐述了在前端页面中利用jQuery处理从服务器端通过Servlet返回的JSON格式数据的具体方法。以下将结合提供的内容，具体介绍相关的知识点： 1. JSON数据格式...

    jQuery读取json数据

    关于"jQuery读取json数据"这个主题，我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据，以及这样做带来的优势。 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于...

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

    本文实例讲述了jQuery解析json格式数据的方法。分享给大家供大家参考，具体如下： 我用的jquery版本是1.7.2，整合了json数据的解析功能，很早的版本是没有的，我记得那个时候，要么用js的for in来读取json字符串里面...

    jQuery解析Json实例详解

    5. jQuery演示实例：文档中提到了几个实例，通过这些实例可以更加直观地理解jQuery解析JSON的各种方法和技巧，这些实例在文中提到的JqueryDemo.html文件中可以找到。 在处理JSON数据时，开发者应该始终牢记数据的...

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

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