前臺JS獲取後臺的Json資料, 動態建立table並填充資料
阿新 • • 發佈:2019-01-03
原文:http://wkf41068.iteye.com/blog/1188302
mark一下,這個月要用的東西。主要是資料格式要好好看一下,之前發資料的時候就出現過資料型別不匹配導致post失敗
- <!-- 測試點選“檢視流程記錄 ”時激發的JS -->
- <script language="JavaScript" type="text/JavaScript">
- function getJosnData(){
- alert($("#formID").val());
-
$.ajax({
- url:"/support/pages/poapply/PoApply.do?actionFlag=getAllLoginInfoJsonData",
- type: "GET",
- dataType: "json",
- data: { applyFormID:$("#formID").val()},
- success: function(data){
- alert("dddd");
-
//呼叫建立表和填充動態填充資料的方法.
- //檢查後臺返回的資料
- createShowingTable(data)
- },
- error: function()
- {
- var msg = "<bean:message key="sys.err.unknowerror"/>";
- alert(msg);
- }
- }
-
);
- }
Java程式碼
- //動態的建立一個table,同時將後臺獲取的資料動態的填充到相應的單元格
- function createShowingTable(data){
- //獲取後臺傳過來的jsonData,並進行解析
- alert("------->進入當前的資料展現");
- var dataArray = $.parseJSON(data.jsonData);
- //此處需要讓其動態的生成一個table並填充資料
- var tableStr = "<table>";
- tableStr = tableStr + "<thead><td>時間</td><td>處理人</td><td>具體處理</td></thead>";
- var len = dataArray.length;
- if(len>=10){
- len = 10;
- }
- for(var i=0 ;i<len ; i++){
- tableStr = tableStr + "<tr><td>"+ dataArray[i].PARTICIPANT_TIME +"</td>"+"<td>"+dataArray[i].PARTICIPANT_ID + "</td>"+"<td>"+dataArray[i].WF_JOB_POSITION +"</td></tr>";
- }
- tableStr = tableStr + "</table>";
- //將動態生成的table新增的事先隱藏的div中.
- $("#dataTable").html(tableStr);
- }
- lt;/script>
Java程式碼
- <!-- jian實驗用途 -->
- <div id="dataTable" style="padding-top:12px; text-align:left">
- <a href="javascript:getJosnData()">
- <font color="#00bbff">
- <bean:message key="ec.apply.license.showlog"/>
- </font>
- </a>
- </div>
- <!-- jian實驗用途 -->
- <tr><td id="formID" value="APF00000003"></td></tr>