`
jayyanzhang2010
  • 浏览: 377879 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

用JQuery解析Json

阅读更多
如果想解析JSON,服务器端最好是是去下载针对不同开发软件,有不同的类库,利用类库在服务器端生成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