一、概述：

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

二、模板引擎步骤：

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

②引入到页面中

③准备一个模板

④准备一个数据

⑤通过模板引擎的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>

三、模板写入script的原因

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

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

AJAX里使用模板引擎的更多相关文章

  1. 第115天：Ajax 中artTemplate模板引擎（一）

    一.不分离与分离的比较 1.前后端不分离,以freemarker模板引擎为例,看一下不分离的前后端请求的流程是什么样的? 从上图可以看出,前后端开发人员的工作耦合主要在(3)Template的使用.后 ...

  2. ajax配合art-template模板引擎的使用

    最近才接触js的模板引擎听说相比以前使用的js foreach加载后台返回的json数据简便很多而且效率方面也很不错.今天自己玩了一下 后台使用的是.net mvc,数据库脚本就不提供了,返回的Jso ...

  3. VTemplate模板引擎的使用--入门篇

    1.什么是VTemplate模板引擎? 详细请点击这里. 2.怎样使用VTemplate模板引擎? 第1步: 下载VTemplate模板引擎的最新库文件(从这里下载),下载回来后将库文件引入到你的项目 ...

  4. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  5. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  6. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  7. 在js里的ejs模板引擎使用

    1.首先需要在页面里引用ejs.min.js. 2.将你的模板使用ejs编写,并存成后缀名.stmpl;(可能需要在打包工具里做些处理) 3.在js里使用require引入xxx.stmpl: con ...

  8. Ajax概述，封装以及联合模板引擎进行数据交互

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 更多资料可参考Ajax 介绍 ...

  9. 浅谈 Web 中前后端模板引擎的使用

    前言 这篇文章本来不打算写的,实话说楼主对前端模板的认识还处在非常初级的阶段,但是为了整个 源码解读系列 的完整性,在深入 Underscore _.template 方法源码后,觉得还是有必要记下此 ...

随机推荐

  1. gorm 批量插入数据

    使用gorm 插入数据的时候,根据官方文档可以使用Create或者FirstOrCreate(). 但是官方没有提供批量插入数据的方法. 根据github的 issue得知,我们可以通过自己拼接sql ...

  2. 小程序的数据监听 用法和vue中的watch一样====使用通配符监听所有自数据字段的变化

    使用通配符监听所有自数据字段的变化

  3. visual studio code 命令行创建发布一个项目

    安装vs core 打开按ctrl+~键打开终端 输入dir看看有什么文件,输入md Test 创建一个文件夹,选择文件后创建一个项目 输入dotnet可以查看信息 执行dotnet --help或者 ...

  4. LOJ2482 CEOI2017 Mousetrap 二分答案、树形DP

    传送门 表示想不到二分答案qwq 将树看作以陷阱为根.先考虑陷阱和起始点相邻的情况,此时老鼠一定会往下走,而如果管理者此时不做操作,那么一定会选择让操作次数变得最大的一棵子树.设\(f_i\)表示当前 ...

  5. sqlite 一些常用的句子

    有关SQLITE最完整的操作语句参考资料,应当是官方网址的http://www.sqlite.org/lang.html这个地方. select max(id)  from table  取最大id ...

  6. 常用 SQL*Plus 命令

    一些常用的 SQL*Plus 命令: 一.Help 命令 SQL*Plus 提供了help 命令来帮助用户查询指定的命令的选项.help 可以向用户提供被查询命令的标题.功能描述.缩写形式和参数选项( ...

  7. typescript_类

    //类的定义 class Animal{ id:string;//默认访问修饰符为 public : 类本身.子类.类外部可访问 public name:string; // public : 类本身 ...

  8. p1.BTC-密码学的原理

    所谓加密货币是不加密的,区块链上所有的交易内容(包括:账户的地址,转账的地址)都是公开的. Bitcoin中主要用到密码学的中的两个功能:Hash和签名. 一 Hash Cryptographic h ...

  9. CentOS7- ABRT has detected 1 problem(s). For more info run: abrt-cli list --since 1548988705

    CentOS7重启后,xshell连接,后出现ABRT has detected 1 problem(s). For more info run: abrt-cli list --since 1548 ...

  10. Android笔记（四十五） Android中的数据存储——XML（一）DOM解析器

    DOM解析XML在j2ee开发中比较常见,在Dom解析的过程中,是先把dom全部文件读入到内存中,然后使用dom的api遍历所有数据,检索想要的数据,这种方式显然是一种比较消耗内存的方式,对于像手机这 ...