AJAX里使用模板引擎

时间 2020-08-09

标签 ajax 使用模板引擎栏目 Ajax 繁體版

原文原文链接

1、概述：

处理响应数据渲染能够使用模板引擎（实际上就是一个API，目的是更容易的将数据渲染到HTML中）
目前市面上有许多模板引擎，能够参考
推荐使用artTemplate，它采用做用域预声明的技术来优化模板渲染速度，同时支持 NodeJS 和浏览器。

2、模板引擎步骤：

①选择一个模板引擎，下载模板引擎文件html

②引入到页面中git

③准备一个模板github

④准备一个数据web

⑤经过模板引擎的js提供的一个函数将模板和数据整合获得渲染结果HTML浏览器

⑥将渲染结果的HTML设置到默认元素的innerHTML中函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="p"></p>
    <script src="lib/template-web.js"></script>
    <script type="text/template" id="tpl">
        我叫 {{name}}
        我来自 {{provices}}
        个人爱好是 {{each hobbies}} {{$value}} {{/each}} 
    </script>
    <script>
        var data={
            name:'eric',
            provices:'江西',
            hobbies:['代码','运动','电脑游戏']
        }
        var ret=template('tpl',data);
        var p=document.getElementById('p');
        p.innerHTML=ret;
    </script>
</body>
</html>

3、模板写入script的缘由

若是写入到JS变量中，维护不方便，不能换行，没有着色
写入到script标签中，innerHTML不会显示在界面上
注意：script标签里若是type类型不是text/JavaScript，标签内容不会安装js文件执行

AJAX里使用模板引擎

1、概述：

2、模板引擎步骤：

3、模板写入script的缘由

4、参考:JavaScript模板引擎实例应用