jsp——动态拼接html

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/whm18322394724/article/details/82025257

正文

  最近小菜接触了一些用ajax动态拼接HTML，其实吧“动态拼接HTML”就是根据特定的条件显示或不显示一段HTML页，之前没接触的时候小菜都是利用各种属性显示隐藏，现在有了新的解决方案——利用ajax动态拼接HTML。如何拼接呢？小菜用一个实例来讲解，描述的可能会有些不太清楚，我会尽力的，详情请见下文。

解析需求

  首先说一下需求：如下面我随便找的苏宁网站的图，页面一加载会加载这些商品分类，加载分类的同时默认加载出第一种分类的所有商品。面对这样的需求有两种解决方案：
  1、使用ajax动态拼接HTML：这样做简单，代码量少，页面刷新次数少
  2、不使用动态拼接：需要写的接口多，重复代码也会很多，请求次数多，页面刷新次数也多

操作实例

1.静态页
  分析一下源HTML代码：发现其实就是div下有一个ul，ul里有三个li，这三li可以通过forEach循环只留下一个li即可，而这一个li可以用ajax进行动态拼接。

<div>
    <ul>
        <li>
            <img src="${ctx}/static_front/images/zcfw-pic.png" />
            <p>商品名</p>
            <p>商品价格</p>
        </li>
        <li>
            <img src="${ctx}/static_front/images/zcfw-pic.png" />
            <p>商品名</p>
            <p>商品价格</p>
        </li>
        <li>
            <img src="${ctx}/static_front/images/zcfw-pic.png" />
            <p>商品名</p>
            <p>商品价格</p>
        </li>
    </ul>               
</div>

2、动态拼接HTML
  ①HTML：把li标签都删掉，给ul标签加个id，便于在js中通过ul的id进行拼接ul包裹的li标签中的代码

<div>
    <ul id="test_list">
    </ul>               
</div>

  ②js：拼接的思路其实就是根据ul标签的id进行拼接li，首先清空HTML，然后调ajax接口（也就是调li显示时所需的数据），再根据接口返回的数据类型进行拼接HTML，拼接完了再将其赋给ul标签

<script>
        //页面加载的时候触发test方法
        $(function() {
            test();
        });


        var categoryId = "";

        function test() {
            //清空要动态拼接的那段HTML代码
            $("#test_list").html("");
            //调拼接HTML时所需数据的接口
            $.post('${ctx}/front/policyServe/serveTypeInfo.action?random="+new Date()', {
                categoryId: categoryId
            }, function(result) {
                var html = '';
                if(result.status > 0) {
                    for(var i = 0; i < result.data.length; i++) {
                        var bean = result.data[i];
                        html += '<li>';
                        html += '<img src="${ctx}/static_front/images/zcfw-pic.png" />'
                        html += '<p>'+bean.title+'</p>'
                        html += '<p>'+bean.content+'</p>'
                        html += '</li>'
                    }
                }
                //将拼接好的<li>标签的HTML放到<ul>标签下
                $("#test_list").html(html);
            })
        }       
</script>