flio

:: 首頁 :: 聯(lián)系 :: :: 管理

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

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

基于jQuery的AJAX和JSON實(shí)現(xiàn)純html數(shù)據(jù)模板加載

www.diybl.com 時(shí)間： 2011-07-30 作者：網(wǎng)絡(luò) 編輯：hawk 點(diǎn)擊： 44 [ 評論 ]

$(document).ready(function (){

$("#spnLoad").html("<font color=green>數(shù)據(jù)加載中……</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);//替換標(biāo)記內(nèi)容

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>沒有查詢到數(shù)據(jù)！</font>");

}

});

</script>

html模板：

<tr>

</tr>

</tr>

</table>

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

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

54 回復(fù) 更多評論

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

4556fd 回復(fù) 更多評論


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




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: 基于jQuery的AJAX和JSON實(shí)現(xiàn)純html數(shù)據(jù)模板（轉(zhuǎn)載） ajax+json渲染html