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

原文：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>