前台JS获取后台的Json数据， 动态创建table并填充数据

原文：http://wkf41068.iteye.com/blog/1188302

mark一下，这个月要用的东西。主要是数据格式要好好看一下，之前发数据的时候就出现过数据类型不匹配导致post失败

1. <!-- 测试点击“查看流程记录 ”时激发的JS -->  
2. <script language="JavaScript" type="text/JavaScript">        
3.     function getJosnData(){       
4.        alert($("#formID").val());                 
5.         $.ajax({  
6.             url:"/support/pages/poapply/PoApply.do?actionFlag=getAllLoginInfoJsonData",  
7.             type: "GET",  
8.             dataType: "json",  
9.             data: { applyFormID:$("#formID").val()},  
10.             success: function(data){  
11.                   alert("dddd");  
12.                   //调用创建表和填充动态填充数据的方法.  
13.                     
14.                 //检查后台返回的数据               
15.                 createShowingTable(data)  
16.             },  
17.             error: function()   
18.             {  
19.                 var msg = "<bean:message key="sys.err.unknowerror"/>";  
20.                 alert(msg);  
21.             }  
22.         }  
23.       );          
24.   }  

Java代码  

1. //动态的创建一个table，同时将后台获取的数据动态的填充到相应的单元格  
2.  function createShowingTable(data){  
3.     //获取后台传过来的jsonData,并进行解析  
4.     alert("------->进入当前的数据展现");  
5.     var dataArray = $.parseJSON(data.jsonData);  
6.     //此处需要让其动态的生成一个table并填充数据  
7.     var tableStr = "<table>";  
8.     tableStr = tableStr + "<thead><td>时间</td><td>处理人</td><td>具体处理</td></thead>";  
9.     var len = dataArray.length;  
10.     if(len>=10){  
11.         len = 10;  
12.     }  
13.     for(var i=0 ;i<len ; i++){  
14.         tableStr = tableStr + "<tr><td>"+ dataArray[i].PARTICIPANT_TIME +"</td>"+"<td>"+dataArray[i].PARTICIPANT_ID + "</td>"+"<td>"+dataArray[i].WF_JOB_POSITION +"</td></tr>";  
15.     }  
16.     tableStr = tableStr + "</table>";  
17.     //将动态生成的table添加的事先隐藏的div中.  
18.     $("#dataTable").html(tableStr);       
19.  }        
20. lt;/script>  

Java代码  

1. <!-- jian实验用途 -->  
2.           
3. <div  id="dataTable" style="padding-top:12px; text-align:left">  
4.     <a href="javascript:getJosnData()">  
5.         <font color="#00bbff">  
6.             <bean:message key="ec.apply.license.showlog"/>   
7.         </font>  
8.      </a>  
9.  </div>  
10.   
11. <!-- jian实验用途 -->  
12. <tr><td id="formID" value="APF00000003"></td></tr>