问题描述

<请教>直接使用Ajax来拼接html页面，这样的做法有什么优劣，可行么？

例如：

 $.ajax({
            url:"http://"+host+"/cicro/notice_front/load_page.do",
            type:"post",
            data:{"page":0},
            dataType:"json",
            async:false,
            success:function(result){
            $('#news_box').empty();
            $('#news_box').append('<div class="news comWidth"><div class="news_top"><div class="news_top_top"><img class="news_top_left fl" src="../images/main_titles2.jpg" width="360" height="75"><p class="news_top_right fr"><img src="../images/hzhb04.png">当前位置：<a href="../cicro_fore/index.html">首页</a><img src="../images/hzhb04.png">通知公告</p></div></div><!-- 公告列表 --><div class="news_list" id="news_list"></div><div id="pageGro" class="cb"></div></div>');
            var count = 1;
            for(i = 0; i < result.data.length; i++){
                var s = result.data[i];
                var content = s.content;
                var title = s.title;
                var createtime = s.createtime.substring(0, 19);
                var p=s.state;
                if(p==1){
                    var str="未发布"
                }else{
                    str="已发布";
                }
                $('.news_list').append('<a href="javascript:go('+s.id+');" class="title"><div class="news_content"><img src="../images/hzhb04.png">'
                        +title+'<i>'+createtime+'</i></div></a>');
            }
            var j;
            var nowPage=0;//当前页
            var listNum=10;//每页显数
            var PagesLen;//总页数
            var PageNum=4;//分页链接接数(5个)
            var count=result.count;
            PagesLen=Math.ceil(count/listNum);
            //分页链接变换
            strS='<a style="margin:0 3px;font-size:14px;padding:4px 8px;border:1px solid #999;" href="###" onclick="upPage(0)">首页</a>  ' ;
            var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)
            var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1
            var strC="",startPage,endPage;
            if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1}
            else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页
            else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}
            for (var i=startPage;i<=endPage;i++){
            if (i==nowPage)
                strC+='<a href="###" style="color:white;margin:0 3px;font-weight:700;font-size:14px;padding:4px 8px;border:1px solid #3c90d9;background-color:#3c90d9;" onclick="upPage('+i+')">'+(i+1)+'</a> '
            else
                strC+='<a style="font-size:14px;padding:4px 8px;border:1px solid #999;" href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '
            }
            strE=' <a style="margin:0 3px;font-size:14px;margin:0 3px;padding:4px 8px;border:1px solid #999;" href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a>  '
            strE2=nowPage+1+"/"+PagesLen+"页"+"  共"+j+"条"
            document.getElementById("pageGro").innerHTML=strS+strC+strE
            },
            error:function(){alert("服务器异常.");}
        });

解决方案

优势比用DOM API创建来得简单
缺点好多：阅读性太差，可再编辑性差，而且容易出错（内容太长单引号、双引号太多容易出错）；
建议每个节点名称变量，加上注释，再进行拼接，这样既不容易出错，后期修改也方便，阅读性好代码整洁号，还根据不同的业务逻辑组装不同的html。如下图：

解决方案二：

拼接时注意自付出的闭合，特别是加事件时参数为字符串时的转义之类，要不很容易字符串不闭合报错，优势肯定是比用DOM API创建来得简单

解决方案三：

这样拼接代码阅读性太差，非必要不建议

解决方案四：

阅读性较差，，但是写起来方便

解决方案五：

阅读性差，但是代码量少

解决方案六：

可以用什么代替呢 现在我们有个需求是不希望出现这种大段的字符串 让使用模板 求思路