jq动态拼接html,不用任何模板渲染，
当页面需要循环一个数组，然而你没有使用像vue v-for这样的循环的时候，也没有用其他模板喜渲染。直接举个例子 jq的方法静态页面<!DOCTYPE html><html><head><meta charset="UTF-8"><title>动态拼接html</title></head>...
·
当页面需要循环一个数组，然而你没有使用像vue v-for这样的循环的时候，也没有用其他模板喜渲染。直接举个例子 jq的方法
静态页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态拼接html</title>
</head>
<body>
<ul id='list'>
<li>
<p>这是标题</p>
<p>这是内容</p>
</li>
<li>
<p>这是标题</p>
<p>这是内容</p>
</li>
<li>
<p>这是标题</p>
<p>这是内容</p>
</li>
<li>
<p>这是标题</p>
<p>这是内容</p>
</li>
</ul>
</body>
</html>
JS部分
<script>
//页面加载的时候触发listinfo方法 ,相当于vue中created方法
$(function() {
listinfo();
});
function listinfo() {
$("#list").html("");
//我这里使用的是apicloud中的ajax,根据自己的需要，你可以使用jq的，或者fetch,axiso这些都可
api.ajax({
url: 'http://192.168.1.101:3101/upLoad', //接口地址
method: 'post',
data: {//没有参数不要管直接删了这里的data
values: {
name: 'haha'
}
}
},function(ret, err){
if (ret) {
//在请求成功的时候来拼接
var html = '';
if(ret.success== true) {//这一步不要按步照班，根据你和后台约定好什么时候成功才返回数据，我们一般是后台返回ret.success== true才算成功
for(var i = 0; i < ret.data.length; i++) {
var datas= ret.data[i];
html += '<li>';
html += '<p>'+datas.title+'</p>'
html += '<p>'+datas.content+'</p>'
html += '</li>'
}
}
//将拼接好的<li>标签的HTML放到<ul>标签下
$("#list").html(html);
} else {
alert( JSON.stringify( err ) );//这里显然是失败了
}
});
}
</script>
新手注意了
当真的动态渲染的时候，静态网页中的li要注释了或者删除，当然也不可能新手到这样的程度了
如果你没有使用Vue react 这样的框架 用的是原生来写推存一个模板已引擎template-native.js
这个模板渲染也很方便，上面的文章中我也具体写了
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献11条内容
所有评论(0)