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

用JQuery解析Json

jsonjQueryMobileServletJavaScript 
阅读更多

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的动态效果效果演示
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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