flio

:: 首頁 :: 聯系 :: :: 管理

0 Posts :: 6 Stories :: 6 Comments :: 0 Trackbacks

一直在尋找ajax如何渲染頁面的東西。早期我的做法一般都是動態拼接html代碼，這次設計到框架設計，考慮使用更好的技術，剛剛看到了一篇不錯的文字，貼下來備忘

基于jQuery的AJAX和JSON實現純html數據模板加載

www.diybl.com 時間： 2011-07-30 作者：網絡編輯：hawk 點擊： 44 [ 評論 ]

$(document).ready(function (){

$("#spnLoad").html("<font color=green>數據加載中……</font>");

$.getJSON("Handler.ashx?n="+Math.random(),function(data){

if(data.length>0){

$.each(data,function(index,json){

var row=$("#template").clone();//克隆一份模板

row.find("#divPName").html(json.FirstName);//替換標記內容

row.find("#divCName").html(json.LastName);

row.find("#divID").html(json.EmployeeID);

row.attr("id",index);//改變行的Id

row.appendTo("#tableTemp");//添加到模板的容器中

});

$("#template").css("display","none");//隱藏行模塊

$("#trLoad").css("display","none");//隱藏提示行模塊

}

else{

$("#spnLoad").html("<font color=green>沒有查詢到數據！</font>");

}

});

</script>

html模板：

<tr>

</tr>

</tr>

</table>

posted on 2012-05-31 11:18 flio 閱讀(2528) 評論(2) 編輯收藏所屬分類: 前端技術

# re: ajax+json渲染html 2016-03-18 16:02 14

54 回復更多評論

# re: ajax+json渲染html 2016-03-18 16:02 7252

4556fd 回復更多評論


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 基于jQuery的AJAX和JSON實現純html數據模板（轉載） ajax+json渲染html