简单知识点实例之二：如何动态生成div框并且同时异步加载数据

一、动态生成框并且同时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运行才可以看到最终效果

简单知识点实例之二：如何动态生成div框并且同时异步加载数据

猜你喜欢