`
jy00314996
  • 浏览: 75771 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

用JQuery解析Json

阅读更多

JSON的数据格式现在挺热门的!这里不解释了。主要讲下Jquery怎么解析JSON

1.因为我用JAVA开发,所以首先去要下载JSON的类库,我用的是http://www.sf.net提供的json类库。 

而json类库以信赖于几个其它的类库,下面把所需要的类截个图记录。
  
2.写服务器商程序,返回一个JSON格式的数据.
package cn.limaoyuan.jquery.xml;   
import java.io.IOException;  
import java.io.PrintWriter; 
 import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;   
public class JqueryServletForXml extends HttpServlet {   
public void doGet(HttpServletRequest request, HttpServletResponse response)  throws ServletException, IOException {  System.out.println("into JqueryServletForXml");  response.setContentType("text/xml");  response.setCharacterEncoding("gbk");  
String xml = "<?xml version=\"1.0\" encoding=\"gbk\"?>&ltuserlist>" +  "&ltuser>&ltname&gtlimy_1</name>&ltage&gt25_1</age></user>" +  "&ltuser>&ltname&gtlimy_2</name>&ltage&gt25_2</age></user>" +  "&ltuser name=\"limy_3\" age=\"25_3\"></user>" +  "&ltuser name=\"limy_4\" age=\"25_4\"></user></userlist>";  response.getWriter().println(xml);  }   
public void doPost(HttpServletRequest request, HttpServletResponse response)  throws ServletException, IOException {  
doGet(request, response);  
}  
} 
 3.其中需要一个User类
package cn.limaoyuan.jquery.json;   
public class User {  
private String name;  
private int age;  
private String address;  
private String phone;  
private String mobile;   
public String getAddress() {  
return address;  
}  
public void setAddress(String address) {  
this.address = address;  
}  
public int getAge() {  
return age;  
}  
public void setAge(int age) {  
this.age = age;  
}  
public String getMobile() {  
return mobile;  
}  
public void setMobile(String mobile) { 
 this.mobile = mobile;  
}  
public String getName() {  return name;  }  
public void setName(String name) {  this.name = name;  } 
 public String getPhone() {  return phone;  }  
public void setPhone(String phone) {  this.phone = phone;  }   } 
 4.前面页面
<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
   <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
<title&gtStripingTable</title> 
<style type="text/css"> 
<!--  *.*{  font-size: 12px;  }  --> 
</style>  
<script type="text/javascript" src="jquery-1.2.1.js"></script> 
<script type="text/javascript" src="loadxml.js"></script> 
<script type="text/javascript"> 
<!--  $(document).ready(
                     function(){});   
                            function getAjaxByJson(){  
                              $("#info").ajaxStart(function(){ 
                             $(this).attr("innerHTML","开始加载!");  });       $("#info").ajaxError(function(request, settings){ 
 $(this).attr("innerHTML","出错页面:" + settings.url);  
});  
 $("#info").ajaxSuccess(function(){  
$(this).attr("innerHTML","加载完成!");  }); 
//1.如果返回的是JSONArray对象,那么用下面的方法打出来值  /*  
$.getJSON("../servlet/JqueryServletForJson",{
t:new Date()},function(data){  
var len = $(data).length;  for(var i=0;i&ltlen;i++){  $("#responseText").append($(data).get(i)+",");  
} 
 });  
*/  
//2.如果返回的是JSONObject对象,无论是返回通过Map构造的还是JavaBean构造的  
/*
 $.getJSON("../servlet/JqueryServletForJson",{
t:new Date()},function(data){  
var name = data.name;  
var age = data.age;  
var address = data.address;  
var phone = data.phone;  
var mobile = data.mobile;   
$("#responseText").append("name: " + name +", age: " + age +  ", address: " + address+", phone: " + phone + ", mobile: " + mobile);  
});  
*/ 
//3.返回嵌套的json对象  
$.getJSON("../servlet/JqueryServletForJson",{
t:new Date()},function(data){  
$("#responseText").append("&ltbr/>用户信息&ltbr/>&lthr/>");  
for(var i=0;i&ltdata.user.length;i++){  
var user = data.user[i];  
$("#responseText").append("name: " + user.name +", age: " + user.age +  ", address: " + user.address+", phone: " + user.phone + ", mobile: " + user.mobile + " &ltbr/>"); 
 }   
$("#responseText").append("&ltbr/>经理信息&ltbr/>&lthr/>"); 
 for(var i=0;i&ltdata.manager.length;i++){  
var manager = data.manager[i];  
$("#responseText").append("name: " + manager.name +", age: " + manager.age +  ", address: " + manager.address+", phone: " + manager.phone + ", mobile: " + manager.mobile + " &ltbr/>");  }   
});   
 }
--> </script> 
</head> 
<body> 
<input type="button" value="测试服务器回传json" onclick="getAjaxByJson()"/> 
<div id="responseText"></div> <div id="info"></div> 
</bdoy> 
</html> 
 
  5.web.xml
<servlet-mapping>  
<servlet-name&gtJqueryServlet</servlet-name>  
<url-pattern>/servlet/JqueryServlet</url-pattern> 
 </servlet-mapping>  <servlet-mapping>  
<servlet-name&gtJqueryServletForXml</servlet-name>  
<url-pattern>/servlet/JqueryServletForXml</url-pattern>  
</servlet-mapping>  <servlet-mapping>  
<servlet-name&gtJqueryServletForJson</servlet-name> 
 <url-pattern>/servlet/JqueryServletForJson</url-pattern>
  </servlet-mapping> 
  
分享到:
评论

相关推荐

    用jquery解析JSON数据的方法

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

    使用JQUery解析JSON字符串

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

    用jquery解析JSON数据的方法20110227

    2. **使用jQuery的内置函数解析JSON**: 如果jQuery异步请求(例如`$.ajax`、`$.get`或`$.post`)设置了`dataType`参数为"json",或者使用`$.getJSON()`方法,jQuery会自动将响应数据解析为JavaScript对象,无需...

    Jquery解析json

    ### Jquery解析json #### 知识点概览 1. **JSON介绍** 2. **jQuery与JSON数据交互** 3. **Struts2框架简介** 4. **JSON类库的选择与使用** 5. **服务器端Java程序编写** 6. **前端jQuery解析JSON数据** #### JSON...

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

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

    Jquery解析Json数据

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

    Jquery.json.js

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

    jquery解析JSON数据的方法.docx

    jQuery提供了更安全的方式来解析JSON数据,即使用`.getJSON()`方法。`.getJSON()`是异步的,它会发送一个HTTP GET请求到指定的URL,然后将返回的JSON数据解析成JavaScript对象。例如: ```javascript $.getJSON(...

    Jquery解析json数据详解

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

    jQuery读取json数据

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

    Jquery解析JSON和XML示例

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

    JQuery操作json的例子

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

    jquery_json.rar_JSON_jquery_jquery-json_jquery.json_jquery.json.

    收到JSON响应后,使用`$.parseJSON`将JSON字符串解析成JavaScript对象,然后可以方便地操作这些数据来更新DOM元素。反之,如果需要将用户在网页上的操作结果(如表单数据)发送回服务器,可以先使用`$.toJSON`将数据...

    jquery-json使用

    无论是解析JSON字符串,还是将JavaScript对象序列化为JSON,亦或是通过Ajax进行JSON数据的传输,jQuery都提供了直观且强大的工具。在实际开发中,熟练掌握这些技巧,能够提高工作效率,减少出错可能性,提升项目质量...

    jquery.json2xml.js和jquery.xml2json.js

    JSON(JavaScript Object Notation)和XML(eXtensible Markup Language)是两种广泛使用的数据交换格式,它们在Web服务和应用程序之间传输数据时起到至关重要的作用。jQuery是一个流行的JavaScript库,它简化了DOM...

    jquery.jsoncookie.zip

    2. 读取并解析JSON数据: ```javascript var jsonData = $.cookie('myJsonData'); var parsedData = JSON.parse(jsonData); ``` 这里,`$.cookie('myJsonData')`会获取Cookie的值,然后`JSON.parse()`用于将字符串...

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

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

    jquery-json美化

    1. **JSON解析**:在JavaScript中,可以使用`JSON.parse()`方法将JSON字符串转换为JavaScript对象,便于进一步处理。例如: ```javascript var jsonString = '{"name":"John", "age":30, "city":"New York"}'; ...

    使用JQuery实现从JSON对象转换为form提交数据

    首先,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于JavaScript的一个子集,易于人阅读和编写,同时也易于机器解析和生成。在前端应用中,我们经常从服务器获取JSON格式的数据,然后在...

Global site tag (gtag.js) - Google Analytics