一、概述：

  • 处理响应数据渲染可以使用模板引擎（实际上就是一个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. Web SSH远程连接利器:gotty

    Web SSH远程连接利器:gotty 这个东东能让你使用浏览器连接你远程的机器! 一. 环境准备 下载https://github.com/yudai/gotty. 请先配置好 Golang 环境, ...

  2. REDISTEMPLATE如何注入到VALUEOPERATIONS

    REDISTEMPLATE如何注入到VALUEOPERATIONS 今天看到Spring操作redis  是可以将redisTemplate注入到ValueOperations,避免了ValueOpe ...

  3. 2.3_Database Interface ODBC组成原理

    从某种意义上来讲,ODBC实际上主要是一个数据库的访问库(API),它包含访问不同数据库所要求的ODBC驱动程序.应用程序要操作不同类型的数据库,只要调用ODBC所支持的函数,动态链接到不同的驱动程序 ...

  4. spring的事务传播行为与隔离级别

    具体请参考blog:https://bbs.csdn.net/topics/391875990 要明白2个概念: 1.“spring的事务传播属性” 2.“spring的事务隔离级别” 例如正常的sp ...

  5. python取字母以及数字随机数

    一.这里用到了:String模块ascii_letters和digits ''.join(random.sample(string.ascii_letters + string.digits, 9)) ...

  6. 二叉树&满二叉树与完全二叉树

    二叉树的定义 二叉树(Binary Tree)是n(n≥0)个元素的有限集合,该集合为空或者为由一个称为"根"的元素及两个不相交的.被分别称为左子树和右子树的二叉树组成 二叉树的基 ...

  7. requests模块 简单使用

    目录 requests模块 简单使用 Anaconda简单了解 简单了解 requests模块 使用requests模块 爬取搜狗首页源码数据 实现一个简易的网页采集器 解决乱码问题 解决UA检测问题 ...

  8. 如何通过Restful API的方式读取SAP Commerce Cloud的Product图片

    需求:我在SAP Commerce Cloud的backoffice里给某product维护了一些图片: 分别位于Normal,Thumbnails和Others等字段: 现在我想通过Restful ...

  9. vuex页面刷新数据丢失的解决办法

    在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例 ...

  10. python 笔记一

    1. is 和 ==区别 is 判断是否是一个ID(内存中的数据是否是同一个), == 判断内容是否一致. 2.python 常量池包括 1.短整型的-5~256 2.字符串的数字.大小写字母随意组合 ...