版权声明:本文为博主原创文章,未经博主允许不得转载。 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>