一、动态生成框并且同时ajax异步请求数据
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<style type="text/css">
#box{width: 80%;height: auto;border: 1px solid red;margin: 5% auto;padding-top: 10px;}
.tableBox{width: 100%;border-collapse:separate;border-spacing: 10px;}
.divBox{width: 100%;height: 300px;border: 1px solid #000;}
</style>
<script type="text/javascript">
$(function () {
//1.动态生成框
var num = 8;//框树(可更改)
var table,tr,tbody;
for(var i = 0;i < num; i++){
//每排四个,不够数量则依次减少
if(i % 4 == 0){
table = $("<table>").attr("class","tableBox");
tr = $("<tr>");
tbody = $("<tbody>");
tbody.append(tr);
table.append(tbody);
$("#box").append(table);
}
var td = $("<td>");
var div = $("<div>").attr("class","divBox");
td.append(div);
tr.append(td);
}
//2.发送ajax请求数据并添加入内
var boxLen = $(".divBox").length;
for(var j = 0; j < boxLen; j++){
var boxNum = $(".divBox").eq(j);
$.ajax({
type:"POST",
async:true,//异步
context:boxNum,//当前数据对应框
url:"url/boxdata_"+j+".json",//为了制造不同框给与不同数据而写
success:function(data){
var data = data.data;
var h1 = $("<h1>").text(data[0].id+data[0].name);
$(this).append(h1);
}
});
}
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
二、于根目录创建url/boxdata_0.json(boxdata_0.json........boxdata_7.json)
三、效果图如下
四、下载链接:http://download.csdn.net/download/miss_ll/10203928
特别提示:由于加载数据缘故,建议用webstorm运行才可以看到最终效果