jq动态拼接html,不用任何模板渲染，

1登峰造极

已于 2023-04-07 11:17:51 修改

阅读量2.9k

点赞数 1

分类专栏： html css js 文章标签： html javascript 前端

于 2019-07-12 11:27:11 首次发布

本文链接：https://blog.csdn.net/qq_33323469/article/details/95598770

版权

js 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

19 篇文章 0 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

当页面需要循环一个数组，然而你没有使用像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登峰造极

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
jq动态拼接html,不用任何模板渲染，

当页面需要循环一个数组，然而你没有使用像vue v-for这样的循环的时候，也没有用其他模板喜渲染。直接举个例子 jq的方法静态页面<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动态拼接html</title> </head>...
复制链接

扫一扫