jsp——动态拼接html

悠悠 2022-05-15 04:51 582阅读 0赞

最近接触了一些用ajax动态拼接HTML，其实“动态拼接HTML”就是根据特定的条件显示或不显示一段HTML页

## <table>   <tbody>    <tr>     <td><font>解析需求</font></td>    </tr>   </tbody>  </table> ##

首先说一下需求：如下面我随便找的苏宁网站的图，页面一加载会加载这些商品分类，加载分类的同时默认加载出第一种分类的所有商品。面对这样的需求有两种解决方案：

1、使用ajax动态拼接HTML：这样做简单，代码量少，页面刷新次数少  
  2、不使用动态拼接：需要写的接口多，重复代码也会很多，请求次数多，页面刷新次数也多

![这里写图片描述][70]

## <table>   <tbody>    <tr>     <td><font>操作实例</font></td>    </tr>   </tbody>  </table> ##

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>

[70]: /images/20220515/e99d0b5288a34cc2a0874f612782a1ac.png

发表评论取消回复

表情：

评论列表（有 0 条评论，582人围观）

还没有评论，来说两句吧...

相关阅读

相关 MySQL——动态SQL拼接

一、动态sql拼接目标能够使用mybatis的标签实现动态SQL拼接分析我们在前边的学习过程中，使用的SQL语句都非常简单。而在实际业务开发中

深藏阁楼爱情的钟/ 2024年04月01日 12:54/ 0 赞/ 290 阅读

相关 MyBatis动态拼接SQL

通过使用MyBatis提供的标签方法可以实现动态SQL拼接 1、if标签 ![de83c80edacb4e04a02c2b490136b3a0.png][] >

深碍√TFBOYSˉ_/ 2023年10月11日 19:49/ 0 赞/ 97 阅读

相关 Excel 动态拼接sql

简介：很多时候，业务给的数据是Excel，开发需要转换成对应的sql语句，使用Excel公式处理效果展示： ![0349822f6b74481d98cd6b980e9

待我称王封你为后i/ 2023年09月26日 18:07/ 0 赞/ 698 阅读

相关 vue动态拼接html，按指定格式展示（如换行）

需求：动态拼接元素并实现换行如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

浅浅的花香味﹌/ 2022年12月26日 09:18/ 0 赞/ 288 阅读

相关静态变动态HTML,动态网页变静态：JSP生成静态HTML技术

![c4468b3f4df77e96b0a416fa2a870fba.png][] 下面的一段代码是，使用jsp生成静态html //在这里如果写成“WEB-INF\\te

怼烎@/ 2022年10月06日 11:44/ 0 赞/ 263 阅读

相关动态拼接HTML css无效,js的append拼接html丢失css样式解决

JS调用中文乱码怎么办网络上有很多的实用的小插件,这些小插件可以直接拿过来实用即可,但是在使用的时候会出现很多的问题,就比如与说今天要讲的乱码中文乱码的问题,这个主要是因为

爱被打了一巴掌/ 2022年10月06日 03:58/ 0 赞/ 280 阅读

相关 Mybatis动态拼接sql

Mybatis动态拼接sql 需求：查询某张表时条件不确定，可能有一个，可能有多个，也可能没有条件  <select id="

墨蓝/ 2022年06月15日 05:25/ 0 赞/ 1283 阅读

相关页面分页html拼接

success:function(data)\{ if(data.status == "success")\{ var page = data.p;

淡淡的烟草味﹌/ 2022年06月10日 09:00/ 0 赞/ 257 阅读

相关 JQ html标签动态拼接的技巧

1、需要循环拼接到页面上的html标签 information :'<div class="info\_box" orderNo="\{12\}">'+ '<div cl

旧城等待，/ 2022年06月05日 23:36/ 0 赞/ 257 阅读

相关 jsp——动态拼接html

最近接触了一些用ajax动态拼接HTML，其实“动态拼接HTML”就是根据特定的条件显示或不显示一段HTML页 <table> <tbody> <

悠悠/ 2022年05月15日 04:51/ 0 赞/ 583 阅读