中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

用JQuery解析Json - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > Ajax技术 > Ajax框架学习 > jquery.js > 用JQuery解析Json

用JQuery解析Json

2009-05-09    文章来源:互联网    浏览次数:

如果想解析JSON,服务器端最好是是去下载针对不同开发软件,有不同的类库,利用类库在服务器端生成JSON格式的数据也就不显得太麻烦了。

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

而json类库以信赖于几个其它的类库,下面把所需要的类截个图记录。
 

 



2.写服务器商程序,返回一个JSON格式的数据.

  1. package cn.limaoyuan.jquery.xml;  
  2.  
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5. import javax.servlet.ServletException;  
  6. import javax.servlet.http.HttpServlet;  
  7. import javax.servlet.http.HttpServletRequest;  
  8. import javax.servlet.http.HttpServletResponse;  
  9.  
  10. public class JqueryServletForXml extends HttpServlet {  
  11.  
  12. public void doGet(HttpServletRequest request, HttpServletResponse response)  
  13. throws ServletException, IOException {  
  14. System.out.println("into JqueryServletForXml");  
  15. response.setContentType("text/xml");  
  16. response.setCharacterEncoding("gbk");  
  17. String xml = "<?xml version=\"1.0\" encoding=\"gbk\"?>&ltuserlist>" +  
  18. "&ltuser>&ltname&gtlimy_1</name>&ltage&gt25_1</age></user>" +  
  19. "&ltuser>&ltname&gtlimy_2</name>&ltage&gt25_2</age></user>" +  
  20. "&ltuser name=\"limy_3\" age=\"25_3\"></user>" +  
  21. "&ltuser name=\"limy_4\" age=\"25_4\"></user></userlist>";  
  22. response.getWriter().println(xml);  
  23. }  
  24.  
  25. public void doPost(HttpServletRequest request, HttpServletResponse response)  
  26. throws ServletException, IOException {  
  27. doGet(request, response);  
  28. }  

3.其中需要一个User类

  1. package cn.limaoyuan.jquery.json;  
  2.  
  3. public class User {  
  4. private String name;  
  5. private int age;  
  6. private String address;  
  7. private String phone;  
  8. private String mobile;  
  9.  
  10. public String getAddress() {  
  11. return address;  
  12. }  
  13. public void setAddress(String address) {  
  14. this.address = address;  
  15. }  
  16. public int getAge() {  
  17. return age;  
  18. }  
  19. public void setAge(int age) {  
  20. this.age = age;  
  21. }  
  22. public String getMobile() {  
  23. return mobile;  
  24. }  
  25. public void setMobile(String mobile) {  
  26. this.mobile = mobile;  
  27. }  
  28. public String getName() {  
  29. return name;  
  30. }  
  31. public void setName(String name) {  
  32. this.name = name;  
  33. }  
  34. public String getPhone() {  
  35. return phone;  
  36. }  
  37. public void setPhone(String phone) {  
  38. this.phone = phone;  
  39. }   

4.前面页面

  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
  4. <title&gtStripingTable</title> 
  5. <style type="text/css"> 
  6. <!--  
  7. *.*{  
  8. font-size: 12px;  
  9. }  
  10. --> 
  11. </style> 
  12.  
  13. <script type="text/javascript" src="jquery-1.2.1.js"></script> 
  14. <script type="text/javascript" src="loadxml.js"></script> 
  15. <script type="text/javascript"> 
  16. <!--  
  17. $(document).ready(function(){});  
  18.  
  19. function getAjaxByJson(){  
  20. $("#info").ajaxStart(function(){  
  21. $(this).attr("innerHTML","开始加载!");  
  22. });  
  23.  
  24. $("#info").ajaxError(function(request, settings){  
  25. $(this).attr("innerHTML","出错页面:" + settings.url);  
  26. });  
  27.  
  28. $("#info").ajaxSuccess(function(){  
  29. $(this).attr("innerHTML","加载完成!");  
  30. }); 

 

  1. //1.如果返回的是JSONArray对象,那么用下面的方法打出来值  
  2. /*  
  3. $.getJSON("../servlet/JqueryServletForJson",{t:new Date()},function(data){  
  4. var len = $(data).length;  
  5. for(var i=0;i&ltlen;i++){  
  6. $("#responseText").append($(data).get(i)+",");  
  7. }  
  8. });  
  9. */  
  10.  
  11. //2.如果返回的是JSONObject对象,无论是返回通过Map构造的还是JavaBean构造的  
  12. /*  
  13. $.getJSON("../servlet/JqueryServletForJson",{t:new Date()},function(data){  
  14. var name = data.name;  
  15. var age = data.age;  
  16. var address = data.address;  
  17. var phone = data.phone;  
  18. var mobile = data.mobile;  
  19.  
  20. $("#responseText").append("name: " + name +", age: " + age +  
  21. ", address: " + address+", phone: " + phone + ", mobile: " + mobile);  
  22. });  
  23. */  
  24.  
  25. //3.返回嵌套的json对象  
  26. $.getJSON("../servlet/JqueryServletForJson",{t:new Date()},function(data){  
  27. $("#responseText").append("&ltbr/>用户信息&ltbr/>&lthr/>");  
  28. for(var i=0;i&ltdata.user.length;i++){  
  29. var user = data.user[i];  
  30. $("#responseText").append("name: " + user.name +", age: " + user.age +  
  31. ", address: " + user.address+", phone: " + user.phone + ", mobile: " + user.mobile + " &ltbr/>");  
  32. }  
  33.  
  34. $("#responseText").append("&ltbr/>经理信息&ltbr/>&lthr/>");  
  35. for(var i=0;i&ltdata.manager.length;i++){  
  36. var manager = data.manager[i];  
  37. $("#responseText").append("name: " + manager.name +", age: " + manager.age +  
  38. ", address: " + manager.address+", phone: " + manager.phone + ", mobile: " + manager.mobile + " &ltbr/>");  
  39. }  
  40.  
  41. });  
  42.  
  43.  
  44. }   
  45.  
  46. --> 
  47. </script> 
  48. </head> 
  49. <body> 
  50. <input type="button" value="测试服务器回传json" onclick="getAjaxByJson()"/> 
  51. <div id="responseText"></div> 
  52. <div id="info"></div> 
  53. </bdoy> 
  54. </html> 

5.web.xml

  1. <servlet-mapping>  
  2. <servlet-name&gtJqueryServlet</servlet-name>  
  3. <url-pattern>/servlet/JqueryServlet</url-pattern>  
  4. </servlet-mapping>  
  5. <servlet-mapping>  
  6. <servlet-name&gtJqueryServletForXml</servlet-name>  
  7. <url-pattern>/servlet/JqueryServletForXml</url-pattern>  
  8. </servlet-mapping>  
  9. <servlet-mapping>  
  10. <servlet-name&gtJqueryServletForJson</servlet-name>  
  11. <url-pattern>/servlet/JqueryServletForJson</url-pattern>  
  12. </servlet-mapping> 

 

文章评论(查看全部)

看不清楚?单击换一张。
loading.. 评论加载中....
关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部