Beetl 提供倆種方式來顯示實現區域性更新
阿新 • • 發佈：2019-03-26
提供倆種方式來顯示使用者列表
第一種採用beetl-ajax,進入該頁面能立即看到第一頁資料，下一頁後非同步載入html片段
第二種採用經典的json方式，進入該頁面後，發起ajax請求，非同步載入第一頁資料。下一頁後非同步載入json資料再用JS轉成html片段
程式碼在:http://git.oschina.net/xiandafu/beetlajax
效能測試感覺差不多，至於開發效率，我更喜歡beetl-ajax 這種模板引擎佔主導方式（我不喜歡太多的js）
<html> <head> <script src="${ctxPath}/resource/js/jquery-2.1.3.min.js"></script> <script src="${ctxPath}/resource/js/time.js"></script> <script> $(document).ready(function(){ loadTable(1); $(document).on('click','.page',function(){ var action = $(this).html(); var current = parseInt($("#current").html()); var page = current; if(action=="next"){ page++; }else{ page--; } loadTable(page); }); }); function loadTable(page){ startTime(); $.post("beetlajax_data.html",{'page':page},function(result){ $("tbody").children().remove(); var array = eval('(' + result + ')'); for(var i=0;i<array.length;i++){ var item = array[i]; var tr = "<tr><td>"+item.id+"</td><td>"+item.name+"</td></tr>"; $(tr).appendTo("tbody"); //$("tbody").appendTo(tr); } endTime(); }); $('#current').html(page); } </script> </head> <body> 這是一個jsonajax測試頁面,載入時間是: ${date(),'yyyy-MM-dd:hh:mm:ss'} <p> <div id="table-container" > <table> <thead><tr><td width=100>id</td><td width=100>姓名</td></tr></thead> <tbody></tbody> </table> 當前頁面<span id="current">1</span><span style="width:20px"></span> <a href="#"><span class="page">next</span></a> <a href="#" ><span class="page">pre</span></a> <br/> 耗時<span id="time" ></span> </div> </body> </html>
<html> <head> <script src="${ctxPath}/resource/js/jquery-2.1.3.min.js"></script> <script src="${ctxPath}/resource/js/time.js"></script> <script> $(document).ready(function(){ $(document).on('click','.page',function(){ var action = $(this).html(); var current = parseInt($("#current").html()); var page = current; if(action=="next"){ page++; }else{ page--; } //載入html,table-container的內容將從後臺載入 startTime(); $("#table-container").load("beetlajax.html?ajaxCmd=userTable",{"page":page},function(){ endTime(); }); }); }); </script> </head> <body> 這是一個beetl-ajax測試頁面,載入時間是: ${date(),'yyyy-MM-dd:hh:mm:ss'} <p> <div id="table-container" > <% #ajax userTable: { %> <table> <tr><td width=100>id</td><td width=100>姓名</td></tr> <%for(user in users){%> <tr><td>${user.id}</td><td>${user.name}</td></tr> <%}%> </table> 當前頁面<span id="current">${page!1}</span><span style="width:20px"></span> <a href="#"><span class="page">next</span></a> <a href="#" ><span class="page">pre</span></a> <% } %> </div> 耗時<span id="time" ></span> </body> </html>
參考官方文件
http://ibeetl.com/guide/#beetl