AJAX结合JS模板引擎 HTML操作CURD

最新推荐文章于 2021-07-03 07:48:05 发布

@航空母舰

最新推荐文章于 2021-07-03 07:48:05 发布

阅读量120

点赞数

分类专栏： JS 组件文章标签： HTML jQuery JavaScript PHP IDEA

本文链接：https://blog.csdn.net/hudeyong926/article/details/99540170

版权

JS 组件专栏收录该内容

21 篇文章 0 订阅

订阅专栏

常见的模板插件有百度开发的(BaiduTemplate) ArtTemplate(腾讯开发) Template7(阿里巴巴开发) 等。我学习了一下ArtTemplate。简单总结一下学习的ArtTemplate的知识。

使用模板引擎对于从后台返回的json数据，显示到html页面中是非常方便的。前端使用模板引擎，在html中写一些标签，与数据与逻辑基本无关。后端在渲染的时候，解析这些标签，生成HTML串。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="art-template.js"></script>
<body>
<div id="content"></div>
<script id="test" type="text/html">
    {{if isAdmin}}

    <h1>{{title}}</h1>
    <ul>
        {{each list value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
        {{/each}}
    </ul>

    {{/if}}
    {{$data}}
</script>

<script>
    var data = {
        title: '基本例子',
        isAdmin: true,
        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    };
    var html = template('test', data);
    document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

在没接触artTemplate之前，我都是手写字符串拼接做模板替换。这样做往往费时费力，而当我使用了artTemplate之后，只需要两句话，就搞定了全部！

clone() .insertBefore, insertAfter 交换html

var arr = new Array();
arr.push('<div>');
arr.push('html test');
arr.push('</div>');
alert(arr.join(''));

优点不需要与后台交互，缺点用js处理临时数据时，不能刷心页面，否则数据会丢失

页面

<input type="button" name="a" value="添加" onclick="addCardDetail()" class="button">
<div id="details_1" class="explain-col">                
	<label for="prefix_1">前缀:</label>
	<input type="text" name="detail[1][prefix]" id='prefix_1' size="5" class="input-text">
	<label for="begin_1">开始编号:</label>		
	<input type="text" name="detail[1][start_sn]" id='begin_1' size="5" class="input-text">
	<label for="end_1">结束编号:</label>
	<input type="text" name="detail[1][end_sn]" id='end_1' size="5" class="input-text"> 
	<input type="button" value="删除" onclick="deletePurchaseDetail(1)" class="button">   
</div>

<script>
    function addCardDetail() {
        lastIdAttr = $("div[id^='details_']").last().attr('id');	//最后一行的id的值

        strIndex = lastIdAttr.lastIndexOf('_') + 1; //取得id中数字的位置号
        index = parseInt(lastIdAttr.substring(strIndex)) + 1;//待增加的序号

        total = $("div[id^='details_']").size();
        if (total < 10) {
            var html = [
                '<div id="details_' + index + '" class="explain-col">',
                '<label for="prefix_' + index + '">前缀:</label>',
                '<input type="text" name="detail[' + index + '][prefix]" id="prefix_' + index + '" size="5" class="input-text">',
                '<label for="begin_' + index + '">开始编号:</label>',
                '<input type="text" name="detail[' + index + '][start_sn]" id="begin_' + index + '" size="5" class="input-text">',
                '<label for="end_' + index + '">结束编号:</label>',
                '<input type="text" name="detail[' + index + '][end_sn]" id="end_' + index + '" size="5" class="input-text">',
                '<input type="button" value="删除" onclick="deletePurchaseDetail(' + index + ')" class="button">',
                '</div>'
            ].join('');
            $(html).insertAfter("#" + lastIdAttr);
        }
    }

    function deletePurchaseDetail(i) {
        len = $("div[id^='details_']").size();
        if (len > 1 && window.confirm("确认删除本行")) {
            $("#details_" + i).remove();
        } else {
            alert('明细信息必须保留一行');
        }
    }
</script>

@航空母舰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX结合JS模板引擎 HTML操作CURD

。使用模板引擎对于从后台返回的json数据，显示到html页面中是非常方便的。前端使用模板引擎，在html中写一些标签，与数据与逻辑基本无关。后端在渲染的时候，解析这些标签，生成HTML串。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &l
复制链接

扫一扫

专栏目录