一、概述：

  • 处理响应数据渲染可以使用模板引擎（实际上就是一个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. 【scratch3.0教程】1.3 了解scratch界面内容

    第3课 了解Scratch界面内容 1.认识Scratch界面 双击桌面快捷方式,启动Scratch程序.我们来认识一下Scratch界面吧! (1)指令区 Scratch程序一共有运动.外观.声音. ...

  2. as3效率优化

    1.改进算法无论对于那一种程序,好的算法总是非常重要的,而且能够极大地提高程序性能,所以任何性能的优化第一步就是从算法或者说程序逻辑的优化开始,检查自己的程序是否有多余的运算,是否在没有必要的时候做了 ...

  3. Linux系统模拟发送HTTP的get和post请求

    一.get请求: 1.使用curl命令: curl “http://www.baidu.com” 如果这里的URL指向的是一个文件或者一幅图都可以直接下载到本地 curl -i “http://www ...

  4. 玩转Spring全家桶笔记 04 Spring的事务抽象、事务传播特性、编程式事务、申明式事务

    1.Spring 的事务抽象 Spring提供了一致的事务模型 JDBC/Hibernate/Mybatis 操作数据 DataSource/JTA 事务 2.事务抽象的核心接口 PlatformTr ...

  5. caffe层解读-softmax_loss

    转自https://blog.csdn.net/shuzfan/article/details/51460895. Loss Function softmax_loss的计算包含2步: (1)计算so ...

  6. 如何在Hybris commerce里创建一个media对象

    进入backoffice的Media中心, 首先新建一个文件夹,用于存放即将创建的media对象: 取名为jerryimage: 然后创建一个新的media对象,取名jerryproductimage ...

  7. VIM的配置以及插件管理

    VIM的配置详细说明参考:http://www.ruanyifeng.com/blog/2018/09/vimrc.html 此外VIM的插件管理比如 Vundle可以参考这个博客: https:// ...

  8. 【zookeeper】apache-zookeeper-3.5.5的安装测试

    下载:apache-zookeeper-3.5.5.tar.gz 进入zookeeper安装目录查看lib文件夹和zookeeper-3.5.5.jar是否存在,如果没有需要手动添加,不然启动时会报错 ...

  9. Linux下用的脚本

    http://blog.itpub.net/29510932/viewspace-1166603/ 批量启动Tomcat 点击(此处)折叠或打开 #!/bin/bash #JDK路径 export J ...

  10. 解决ifuse不支持24位UDID问题

    在使用ifuse对iphone设备进行沙盒挂载时, 对类似XXXXXXXX-XXXXXXXXXXXXXXXX UDID设备会提示Invalid device UDID specified, lengt ...