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

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

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

<script type="text/javascript">
        $(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模板：
<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>


posted on 2012-05-31 11:18 flio 阅读(2529) 评论(2)  编辑  收藏 所属分类: 前端技术

Feedback

# re: ajax+json渲染html 2016-03-18 16:02 14
54  回复  更多评论
  

# re: ajax+json渲染html 2016-03-18 16:02 7252
4556fd  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: