2 javacontrol JavaControl 于 2016.02.18 14:14 提问

<请教>直接使用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("服务器异常.");}
        });

6个回答

qq_20039385
qq_20039385   2016.02.18 17:55
已采纳

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

showbo
showbo   Ds   Rxr 2016.02.18 14:16

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

freedamjustice
freedamjustice   2016.02.18 14:36

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

Royal_lr
Royal_lr   Ds   Rxr 2016.02.18 20:09

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

Mr_dsw
Mr_dsw   Ds   Rxr 2016.02.18 22:23

阅读性差,但是代码量少

qq_33671131
qq_33671131   2016.04.29 14:34

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
利用ajax给html动态拼接html代码
function get_all_category_with_id() {           $.ajax({             type: "get",             url: "../../../appUpload/getAllCategoryByid",             async : false,             dataType: "tex
ajax做json拼接
[     {         "id": "100000",         "menu": [             {                 "text": "部门管理",                 "items": [                     {                         "id": "100006",       
ajax 异步 拼接表
ajax 异步传参数 获取json 循环拼接表头和数据展示
jquery拼接ajax 的json和字符串拼接
jquery拼接字符串ajax<form id="myForm" action="#"> <input name="name"/> <input name="age"/> <input type="submit"/> </form> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.
$.ajax请求在html页面拿不到数据
最近搭了一个SSM框架,但是前台页面是html,所以不能用jsp的那套标签去取数据,但是数据可以拿到,却怎么也显示不到页面上,经一个大神指点在$.ajax中加入了这样一行代码,问题完美解决。 var retData = eval(&amp;amp;amp;quot;(&amp;amp;amp;quot; + data + &amp;amp;amp;quot;)&amp;amp;amp;quot;); 以上代码表示将拿到的数据转换成json对象的格式,然后就可以.来获取想要的数据了。(但是有时不加这
原始的Ajax:直接使用XmlHttpRequest
 原始的Ajax:直接使用XmlHttpRequest  如上所述,Ajax的核心是JavaScript对象XmlHttpRequest。下面的示例文章评价系统将带您熟悉Ajax的底层基本知识:http://tearesolutions.com/ajax-demo/raw-ajax.html。注:如果您已经在本地WebLogic容器中安装了ajax-demo.war,可以导航到http:/
js拼接HTML页面
在构造HTML页面时,我们常常使用html+=“……”形式拼接HTML标签,这种方式是可以解决我们的需求,但是这样会使我们的页面看起来凌乱,也不容易看出页面的结构性。我们可以用以下两种形式来替换此类做法,得到的效果是一样的。 1.使用HandlebarsJs。下载handlebars.min.js,在页面上引入改js,就可以使用了。例如,我们给用户添加新角色,我们要选择已有的角色,然后添加到用户
jquery ajax 返回整个html页面
用ajax从jsp拿回ajax数据,却发现连带html整个代码都返回了,解决方法是关闭response的writer 下面是ajax代码 $j.ajax({             type : "POST",             url : "/asi/js
ajax获取数据,应该返回json用js拼接 还是在后台拼接HTML完再返回
1、后台程序生成json数据,不用拼接直接返回 2、ajax接收数据后,调用js解析json数据,可以利用jquery.parseJSON()方法解析 3、解析之后得到obj对象,然后可以直接obj.name这样获取对象属性 4、用html代码拼接 示例: var obj = jQuery.parseJSON('{"name":"John","age":"20"}'); 比如拼接为表格
什么是ajax?,ajax能干什么?
AJAX全称“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术: 基于web标准(standards-based presentation)XHTML+CSS的表示; 使用 DOM(Document Object Model)进行动态显示及交互; 使用 XML 和 XSLT 进