用JQuery解析Json
如果想解析JSON,服务器端最好是是去下载针对不同开发软件,有不同的类库,利用类库在服务器端生成JSON格式的数据也就不显得太麻烦了。
步骤:
1.因为我用JAVA开发,所以首先去要下载JSON的类库,我用的是http://www.sf.net提供的json类库。
而json类库以信赖于几个其它的类库,下面把所需要的类截个图记录。
2.写服务器商程序,返回一个JSON格式的数据.
packagecn.limaoyuan.jquery.xml;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassJqueryServletForXmlextendsHttpServlet{
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
System.out.println("intoJqueryServletForXml");
response.setContentType("text/xml");
response.setCharacterEncoding("gbk");
Stringxml="<?xmlversion=\"1.0\"encoding=\"gbk\"?><userlist>"+
"<user><name>limy_1</name><age>25_1</age></user>"+
"<user><name>limy_2</name><age>25_2</age></user>"+
"<username=\"limy_3\"age=\"25_3\"></user>"+
"<username=\"limy_4\"age=\"25_4\"></user></userlist>";
response.getWriter().println(xml);
}
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
doGet(request,response);
}
}
3.其中需要一个User类
packagecn.limaoyuan.jquery.json;
publicclassUser{
privateStringname;
privateintage;
privateStringaddress;
privateStringphone;
privateStringmobile;
publicStringgetAddress(){
returnaddress;
}
publicvoidsetAddress(Stringaddress){
this.address=address;
}
publicintgetAge(){
returnage;
}
publicvoidsetAge(intage){
this.age=age;
}
publicStringgetMobile(){
returnmobile;
}
publicvoidsetMobile(Stringmobile){
this.mobile=mobile;
}
publicStringgetName(){
returnname;
}
publicvoidsetName(Stringname){
this.name=name;
}
publicStringgetPhone(){
returnphone;
}
publicvoidsetPhone(Stringphone){
this.phone=phone;
}
}
4.前面页面
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gbk"/>
<title>StripingTable</title>
<styletype="text/css">
<!--
*.*{
font-size:12px;
}
-->
</style>
<scripttype="text/javascript"src="jquery-1.2.1.js"></script>
<scripttype="text/javascript"src="loadxml.js"></script>
<scripttype="text/javascript">
<!--
$(document).ready(function(){});
functiongetAjaxByJson(){
$("#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:newDate()},function(data){
varlen=$(data).length;
for(vari=0;i<len;i++){
$("#responseText").append($(data).get(i)+",");
}
});
*/
//2.如果返回的是JSONObject对象,无论是返回通过Map构造的还是JavaBean构造的
/*
$.getJSON("../servlet/JqueryServletForJson",{t:newDate()},function(data){
varname=data.name;
varage=data.age;
varaddress=data.address;
varphone=data.phone;
varmobile=data.mobile;
$("#responseText").append("name:"+name+",age:"+age+
",address:"+address+",phone:"+phone+",mobile:"+mobile);
});
*/
//3.返回嵌套的json对象
$.getJSON("../servlet/JqueryServletForJson",{t:newDate()},function(data){
$("#responseText").append("<br/>用户信息<br/><hr/>");
for(vari=0;i<data.user.length;i++){
varuser=data.user[i];
$("#responseText").append("name:"+user.name+",age:"+user.age+
",address:"+user.address+",phone:"+user.phone+",mobile:"+user.mobile+"<br/>");
}
$("#responseText").append("<br/>经理信息<br/><hr/>");
for(vari=0;i<data.manager.length;i++){
varmanager=data.manager[i];
$("#responseText").append("name:"+manager.name+",age:"+manager.age+
",address:"+manager.address+",phone:"+manager.phone+",mobile:"+manager.mobile+"<br/>");
}
});
}
-->
</script>
</head>
<body>
<inputtype="button"value="测试服务器回传json"onclick="getAjaxByJson()"/>
<divid="responseText"></div>
<divid="info"></div>
</bdoy>
</html>
5.web.xml
<servlet-mapping>
<servlet-name>JqueryServlet</servlet-name>
<url-pattern>/servlet/JqueryServlet</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>JqueryServletForXml</servlet-name>
<url-pattern>/servlet/JqueryServletForXml</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>JqueryServletForJson</servlet-name>
<url-pattern>/servlet/JqueryServletForJson</url-pattern>
</servlet-mapping>