簡單知識點例項之二：如何動態生成div框並且同時非同步載入資料
阿新 • • 發佈：2018-11-01
一、動態生成框並且同時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執行才可以看到最終效果