一段完整的用jquery遍历json并显示到table中的客户端代码

11380阅读　0评论2014-03-06　cnljh
分类：jQuery

本段代码没有采用jquery传统的写法，因为那样写大括号包小括号，小括号又包大括号实在眼花，所以我把所有函数都分开写了。
本段代码json数据（data表示的数据)是从服务端servlet中取得，如果要在客户端独立运行该段代码，请用自的json数据代替data并在按钮的onclick事件中直接调用myshowJson函数

点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6.     <script type="text/javascript" src=""></script>
  7.     <script type="text/javascript" >

  9.     function myshowJson(data,status){
  10.          strHtml=" ";
  11.          strHtml=strHtml+mydg(data,strHtml);
  12.           strHtml=strHtml+"
    13. "    ;
  13.           alert(strHtml);
  14.              $("#myjsonData").html(strHtml);    
  15.     }
  16.     
  17.     function mydg (data,strHtmlkk){
  18.             var strHtml=strHtmlkk;

  20.            for(cc in data){
  21.              if(typeof(data[cc])=='object'){
  22.               strHtml=strHtml+" ";
  23.                 strHtml=strHtml+""+cc+"";
  24.                 strHtml=strHtml+""+data[cc]+"";
  25.               strHtml=strHtml+" ";
  26.                   strHtml=arguments.callee(data[cc],strHtml);         
  27.              }else{
  28.                   strHtml=strHtml+" ";
  29.                 strHtml=strHtml+""+cc+"";
  30.               strHtml=strHtml+""+data[cc]+"";
  31.                   strHtml=strHtml+" ";
  32.                  }
  33.             }
  34.             return strHtml;
  35. }

  37.         function mygetJson (){

  39.                 $.post("./servlet/TestTemp",{userName:"cccc",password:"ppppp"},function(data,status){myshowJson(data,status);},"json");

  41.         };    
  42.    function myregisterCmd(){
  43.          $("#cmdLogin").click( mygetJson);
  44.          alert("registerCmd");
  45.     };
  46.     
  47.     $(document).ready(myregisterCmd);

  49.     </script>
  50. </head>
  51. <body>

  53. <input type="button" id="cmdLogin" value="testestestest">
  54. <div id="msg"></div>
  55. <div id="myjsonData"></div>

  57. </body>
  58. </html>

上一篇：mongodb用子文档做为查询条件的两种方法
下一篇：虚拟化系列-VMware vSphere 5.1 VDP备份管理