Question

发送ajax请求到后台获取的数据不能显示到弹框<div>中

点击按钮发送ajax请求到后台获取的数据，div能弹出来，但是下面的数据不显示，如下图（块里面为空，无数据，只有表头）：

在html的<script>标签中的代码：

红框①中的数据都获取到了但是不显示到块中；粉框②是拼接的html，不显示数据的问题估计就出在这里，其他地方元素都显示正常。
我的逻辑是，从服务器取出的数据填进这个div中，但就是不显示。是不是还缺点什么？是异步的问题吗？





Answer 1

异步引起的问题。你应该在success函数最后把拼接好的html显示在div中，然后再显示。

做法：定义好一个带有表头的空表格，隐藏它，待加载完数据再显示即可。
<table id="t2" style="display:none">
<tr>表头</tr>
</table>
$.ajax({
type: "POST",
url: "<%=path %>/two",
dataType: "json",
data:{'liDu':liDu,'startTime':startTime,'endTime':endTime},
success: function(returnedData){
var html = "";
var tdHead = "<td height='20'><div align='center'><span class='STYLE1'>";
var tdFoot = "</span></div></td>";
$("#t2 tr:gt(0)").remove();//每次刷新，但是不移除表头第一行。
for(var i=0;i<returnedData.length;i++){
var countInfo = returnedData[i];
var totalCount = countInfo.totalCount;
var sucCount = countInfo.sucCount;
var failCount = countInfo.failCount;
var unknowCount = countInfo.unknowCount;
var sucPercent = countInfo.sucPercent;
var failPercent = countInfo.failPercent;
var unknowPercent = countInfo.unknowPercent;
var countTimeZone = countInfo.countTimeZone;
html += "<tr>" + tdHead + (i + 1) + tdFoot +
tdHead + totalCount + tdFoot +
tdHead + sucCount + tdFoot +
tdHead + sucPercent + tdFoot +
tdHead + failCount + tdFoot +
tdHead + failPercent + tdFoot +
tdHead + unknowCount + tdFoot +
tdHead + unknowPercent + tdFoot +
tdHead + countTimeZone + tdFoot + "</tr>";
}
$("#t2").append(html);
$("#t2").show("slow");//我这是一个表格。
}
});

Answer 2

你ajax的success回调函数中只是创建了这个div#light这个元素，没有把它追加到文档流中，而且ajax是异步进行的，最后的$('#light').show(); 执行时还没有获得返回都的数据

Answer 3

你只是输出拼接了字符串，但是并没有在指定位置追加数据填充html代码。

尝试 利用 $("#xxxx").html("") 或 append() 都行