基于jQuery的AJAX和JSON实现纯html数据模板（转载）

flio — Thu, 31 May 2012 03:23:00 GMT

摘要: 来自：http://www.cnblogs.com/linzheng/archive/2010/10/14/1851799.html 通过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。我们先来看一下html模板： Code highlighting produced by Actipr... 阅读全文

flio 2012-05-31 11:23 发表评论

ajax+json渲染html

flio — Thu, 31 May 2012 03:18:00 GMT

一直在寻找ajax如何渲染页面的东西。早期我的做法一般都是动态拼接html代码，这次设计到框架设计，考虑使用更好的技术，刚刚看到了一篇不错的文字，贴下来备忘

基于jQuery的AJAX和JSON实现纯html数据模板加载

www.diybl.com    时间： 2011-07-30  作者：网络   编辑：hawk 点击：  44 [ 评论 ]

<script type="text/javascript">
        $(document).ready(function (){
            $("#spnLoad").html("数据加载中……");
            $.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("没有查询到数据！");
                }
            });
        });
    script>

html模板：

<table cellpadding="1" cellspacing="1" border="0px" style="background-color:#000" width="600px" id="tableTemp">
        <tr>
            <td style=" background-color:#fff">省份td>
            <td style=" background-color:#fff">城市td>
            <td style=" background-color:#fff">城市编号td>
        tr>
        <tr id="trLoad" style=" background-color:#fff"><td colspan="3"><span id="spnLoad">td>tr>
        <tr id="template">
            <td style=" background-color:#fff" id="divPName">td>
            <td style=" background-color:#fff" id="divCName">td>
            <td style=" background-color:#fff" id="divID">td>
        tr>
        table>

flio 2012-05-31 11:18 发表评论

BlogJava-flio-文章分类-前端技术

基于jQuery的AJAX和JSON实现纯html数据模板（转载）

ajax+json渲染html