一、概述：

  • 处理响应数据渲染可以使用模板引擎（实际上就是一个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. PMM--简介与部署

    一.PMM架构 Percona Monitoring and Management是percona一款开源的用于管理和监控MySQL 和MongoDB性能的开源平台,通过PMM客户端收集到的DB监控数 ...

  2. [LOJ3048] [十二省联考2019] 异或粽子

    题目链接 LOJ:https://loj.ac/problem/3048 洛谷:https://www.luogu.org/problemnew/show/P5283 Solution 考虑每个子串都 ...

  3. tsql获取sqlserver某个库下所有表

    ) declare my_cursor cursor for (select [name] from SysObjects where XType='U') open my_cursor fetch ...

  4. How to read request body in a asp.net core webapi controller?

    原文 How to read request body in a asp.net core webapi controller? A clearer solution, works in ASP.Ne ...

  5. 未能加载文件或程序集system.web.extensions解决方法

    发现未能加载文件或程序集的错误,这是由于我的机器上没有安装Ajax的原因.问题解决后,整理如下:表现:1.＂System.Web.Extensions, Version=1.0.61025.0, Cu ...

  6. C# vb .net实现gamma伽玛调整特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的gamma伽玛调整特效滤镜呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: ...

  7. Mongodb 学习笔记(三) .net core SDK

    首先添加 Nuget包  MongoDB.Driver 创建一个Model. public class Student { public ObjectId _id { get; set; } publ ...

  8. STM32F10x芯片类型 STM32F10X_LD STM32F10X_MD STM32F10X_HD STM32F10X_XL STM32F10X_CL

    stm32f10x.h 固件库stm32f10x.h中有如下解释 #if !defined (STM32F10X_LD) && !defined (STM32F10X_LD_VL) & ...

  9. .NET CORE 技术债

    技术债:OCELOT 网关/熔断/降级/限流CONSUL 服务注册/发现CAP 分布式事件总线SKYWALKING 微服务监控

  10. ViewBag---MVC3中 ViewBag、ViewData和TempData的使用和差别-------与ViewBag+Hashtable应用例子

    ViewBag 在MVC3開始.视图数据能够通过ViewBag属性訪问.在MVC2中则是使用ViewData.MVC3中保留了ViewData的使用.ViewBag 是动态类型(dynamic),Vi ...