ajax里使用模板引擎

一、概述:

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

二、模板引擎步骤:

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

②引入到页面中

③准备一个模板

④准备一个数据

⑤通过模板引擎的js提供的一个函数将模板和数据整合得到渲染结果HTML

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

三、模板写入script的原因

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

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

原文地址:https://www.cnblogs.com/EricZLin/p/9228989.html

时间: 2024-07-30 19:49:30

ajax里使用模板引擎的相关文章

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

JavaScript学习总结(一)--延迟对象.跨域.模板引擎.弹出层.AJAX示例 目录 一.AJAX示例 1.1.优点 1.2.缺点 1.3.jQuery AJAX示例 二.延迟对象(Deferred) 2.1.回调函数 2.2.deferred.done 三.跨域 3.1.什么是跨域 3.2.JSONP跨域 3.3.jQuery使用JSONP跨域 3.4.跨域资源共享(CORS) 3.5.小结 四.弹出层 五.模板引擎 5.1.Hello World 5.2.方法 5.3.与AJAX结合应

ajax&模板引擎

使用命名空间,来避免命名的ajax函数被重名的覆盖var $_fox_tool = { // 将 我们封装的 函数 保存在 一个 全局 对象的 属性中 ajax_tool_pro: function(object) { var ajaxObj = new XMLHttpRequest(); if (object.method == 'post') { ajaxObj.open(object.method, object.url); ajaxObj.setRequestHeader("Conten

<Ajax> 七. 模板引擎的使用(template-web.js的使用)

<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>Title</title> </head> <body> <h3>模板引擎的使用</h3> </body> </html> <!-- 模板 --> <!-- 引入模板引擎js --> <scrip

JavaScript模板引擎

JavaScript模板引擎实例应用 在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.artTemplate.doT.baiduTemplate.kissyTemplate等模板引擎. 本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构:

模板引擎doT.js

作为一名前端攻城师,经常会遇到从后台ajax拉取数据再显示在页面的情境,一开始我们都是从后台拉取再用字符串拼接的方式去更达到数据显示在页面! <!-- 显示区域 --> <div id="testid"></div> <script type="text/javascript"> var testjson={"name":"张三","age":31,"

Node.js模板引擎的深入探讨

每次当我想用 node.js 来写一个 web 相关项目的时候,我总是会陷入无比的纠结,原因是 JavaScript 生态圈里的模板引擎实在太多了,但那么多却实在找不出一个接近完美的,所谓完美的概念就是功能丰富,书写简单,前后端可共用等一些属性.虽然可以在 Template Chooser 按功能进行挑选,但挑选的结果再用来对比还是各有各的问题.所以干脆就一些模板引擎进行稍微深入的分析,希望通过对比总结出哪种更值得去使用. 第一轮排除 在上次node模板引擎简单比较的文章里,其实已经有个简单的筛

全球最快的JS模板引擎:tppl

废话不多说,先上测试: 亲测请访问:[在线测试地址]单次结果不一定准确,请多测几次. tppl 的编译渲染速度是著名的 jQuery 作者 John Resig 开发的 tmpl 的 43 倍!与第二名 artTemplate 也有一倍的差距. 似乎每一个大公司都选择自己开发模板引擎并将其开源,结果就是社区充斥着数不清的引擎,让人眼花缭乱无从选择.随着时间的流逝,越来越多的功能被添加进去,最终让一个强悍的发动机变成了一台臃肿复杂零件生锈的拖拉机.天呐,我就想网页面里插一段 html,你居然要我往

如何选择Javascript模板引擎(javascript template engine)?

译者 jjfat 日期:2012-9-17  来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: 你的到了一个JSON对象,如下: var data={   email: '[email protected],   gender: 'male'  } 然后你需要将json数据组织成页面内容,如下: var email, gender; email= '<div class="mail&q

knockoutJS学习笔记01:从拼接字符串到编写模板引擎

开篇 关于knockout的文章,园里已经有很多大神写过了,而且都写得很好.其实knockout学习起来还是很容易的,看看官网的demo和园里的文章,练习练习就可以上手了(仅限使用,不包含研究源码).之所以想写这个系列,主要是想记录自己的学习和应用过程,也希望能给初学者一点帮助. 既然是学习过程就一步一步来,从最开始的解决方案,到优化过程,到最后的实现方案.有了思考和对比,才会更加明白这个东西有什么好处,为什么使用它.什么情况要使用它.ok, 官网学习链接为?:knockoutJS 准备例子 过