Ajax学习笔记-客户端模板引擎-9

在传统的客户端分服务器端通信时，服务器都是将数据和HTML拼接好，再将拼接好的传递给客户端。
但是现在我们使用ajax发送请求，服务器端在大多数情况下会使用json格式的数据作为响应内容，也就是说，原本数据和html的拼接是在服务器端完成的。但是现在这项工作需要在客户端完成。在客户端做拼接时，我们也需要模板引擎。

一，客户端模板引擎

作用：使用模板引擎提供的模板语法，可以将数据和html拼接起来
下载地址：http://aui.github.io/art-template/zh-cn/index.html

二，客户端模板引擎的使用步骤

一个文档中可能有多个模板文档，为了加以区分，需要设置id值，而typ属性的设置，则是为了写模板时代码高亮正常。

这里的返回值，就是拼接好的字符串了。

实际例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 将模板引擎的库文件引入到当前页面 --><script src="js/template-web.js"></script></head><body><div id="containter"></div><!-- 2,准备art-template模板 --><script type="text/html" id="tql"><h1>{{username}}{{age}}</h1></script><script type="text/javascript">// 3,告诉模板引擎将哪个数据和哪个模板进行拼接// 第一个参数是模板id,第二个参数是对象类型的数据// 方法的返回值就是拼接好的html字符串,且是经模板字符串合并过的var html=template('tql',{username:'zhangsan',age:30})//html:<h1>zhangsan 30</h1>document.getElementById("containter").innerHTML=html</script></body>
</html>

实际效果：

Ajax学习笔记-客户端模板引擎-9相关推荐

黑马ajax学习笔记02--art-template模板，自动提示，防抖，三级联动，fromData传参及传文件，同源，jsonp，天气预报，CROS，服务器桥接，withCredential跨域登录
1.模板引擎概述作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来实际上是实现在客户端做数据拼接 art-template模板引擎官网:http://aui.github.io/ar ...
OpenCV 学习笔记（模板匹配）
OpenCV 学习笔记(模板匹配) 模板匹配是在一幅图像中寻找一个特定目标的方法之一.这种方法的原理非常简单,遍历图像中的每一个可能的位置,比较各处与模板是否"相似",当相似度足够 ...
阿里云学习笔记——设置规则引擎（2）
标题阿里云学习笔记--设置规则引擎(2) 下面是我自己作为学习笔记分享,大神勿喷,如有叙述错误的地方欢迎指正. 1.定义Topic 定义了p_data和s_data 2.创建规则引擎,这里创建了APP ...
Ajax学习笔记-动力节点-王鹤老师
Ajax学习笔记-动力节点-王鹤老师视频教程来自:https://www.bilibili.com/video/BV15k4y167XM?spm_id_from=333.999.0.0 第一节全局 ...
Ajax（jQuery封装），表单form提交（Ajax），art-template模板引擎，原生Ajax，XML和JSON，axios，跨域和JSONP，防抖和节流，HTTP协议
目录服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
小汪的ajax学习笔记
ajax 1.初识ajax 请求方式 1.get请求 2.post请求 2.1 setRequestHeader参数详解 3.状态码 4.ajax错误处理 5.ie低版本浏览器缓存问题 6.ajax封 ...
Symfony2 学习笔记之模板使用
我们知道,controller负责处理每一个进入Symfony2应用程序的请求.实际上,controller把大部分的繁重工作都委托给了其它地方,以使代码能够被测试和重用.当一个controller需 ...
SpringBoot笔记之模板引擎
模板引擎 1. SpringBoot Web开发总览 1.1 Web开发静态资源处理 1.2 首页处理 2. Thymeleaf模板引擎 2.1 模板引擎 2.2 引入Thymeleaf 2.3 Th ...
前端模板引擎 —— 带你学习Jade / Pug 模板引擎
模板引擎是什么模板引擎是将静态部分糅合的一种实现机制或者技术. 目前使用较广的模板引擎有以下几种:Jade / Pug.EJS.Handlebars. 本文详述Jade / Pug模板引擎在项目开发 ...
Python学习笔记——Flask模板
目录 3.1 模板 3.2 过滤器: 3.3 Web表单: 3.4 控制语句 3.5 宏.继承.包含 3.6 Flask中的特殊变量和方法: 3.1 模板在前面的示例中,视图函数的主要作用是生成请求 ...

Ajax学习笔记-客户端模板引擎-9

一，客户端模板引擎

二，客户端模板引擎的使用步骤

Ajax学习笔记-客户端模板引擎-9相关推荐

最新文章

热门文章