1. 程式人生 > >前臺JS獲取後臺的Json資料, 動態建立table並填充資料

前臺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.                 createShowingTable(data)  
  15.             },  
  16.             error: function()   
  17.             {  
  18.                 var msg = "<bean:message key="sys.err.unknowerror"/>";  
  19.                 alert(msg);  
  20.             }  
  21.         }  
  22.       );          
  23.   }  

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