前端复习——AJAX（一）

最新推荐文章于 2024-05-10 23:20:32 发布

子曰礼

最新推荐文章于 2024-05-10 23:20:32 发布

阅读量486

点赞数

分类专栏：前端复习文章标签：前端 ajax

本文链接：https://blog.csdn.net/weixin_45792414/article/details/125488093

版权

前端复习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前端复习——AJAX

服务器基本概念与初识AJAX
form表单与模板引擎

服务器基本概念与初识AJAX

客户端与服务器

上网的本质目的：通过互联网的形式来获取和消费资源。

上网过程中，负责存放和对外提供资源的电脑，叫做服务器。
上网过程中，负责获取和消费资源的电脑，叫做客户端。

在这里插入图片描述

URL地址

URL（全称是Uniform Resource Locator）中文叫统一资源定位符，用于标识互联网上每一个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。

常见的URL举例：
在这里插入图片描述
URL地址一般由三部分组成：

客户端与服务端之间的通信协议
存有该资源的服务器名称
资源在服务器上具体的存放位置

客户端与服务器的通信过程

在这里插入图片描述

注意：

客户端与服务器之间的通信过程，分为请求-处理-响应三个步骤。
网页中的每个资源，都是通过请求-处理-响应的方式从服务器获取回来的。

在这里插入图片描述

服务器对外提供了哪些资源

在这里插入图片描述
网页中的数据，也是服务器对外提供的一种资源。例如股票数据、各行业排行榜等。

HTML是网页的骨架，CSS是网页的颜值，JavaScript是网页的行为，数据是网页的灵魂。骨架、颜值、行为皆为数据服务，数据在网页中无处不在。

数据，也是服务器对外提供的一种资源。只要是资源，必然要通过请求-处理-响应的方式进行获取。
在这里插入图片描述
如果要在网页中请求服务器上的数据资源，则需要用到XMLHttpRequest对象。
XMLHttpRequest（简称xhr）是浏览器提供的js成员，通过它可以请求服务器上的数据资源。
最简单的用法 var xhrObj = new XMLHttpRequest()

资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为get和post请求。

get请求通常用于获取服务端资源（向服务器要资源）
例如：根据URL地址，从服务器获取HTML文件、CSS文件、js文件、图片文件、数据资源等。
post请求通常用于向服务器提交数据（往服务器发送资源）
例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作。

了解Ajax

Ajax的全称是Asynchronous Javascript And XML（异步JavaScript和XML）。通俗的理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax。Ajax能让我们轻松实现网页与服务器之间的数据交互。
在这里插入图片描述

用户名检测：注册用户时，通过ajax的形式，动态检测用户名是否被占用。
搜索提示：当输入搜索关键字时，通过ajax的形式，动态加载搜索提示列表。
数据分页显示：当点击页码值的时候，通过ajax的形式，根据页码值动态刷新表格数据。
数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过ajax的形式，来实现数据的交互。

jQuery中的Ajax

浏览器中提供的XMLHttpRequest用法比较复杂，所以jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度。

jQuery中发起Ajax请求最常用的三个方法如下：

$.get()
$.post()
$.ajax()

$.get()函数的语法

jQuery中$.get()函数的功能单一，专门用来发起get请求，从而将服务器上的资源请求到客户端来进行使用。

$.get()函数的语法如下：

$.get(url, [data], [callback]);

其中，三个参数各自代表的含义如下：

参数名	参数类型	是否必选	说明
`url`	`string`	`是`	要请求的`资源地址`
data	object	否	请求资源期间要`携带的参数`
callback	function	否	请求成功时的`回调函数`

$.get()发起不带参数的请求

使用$.get()函数发起不带参数的请求时，直接提供请求的URL地址和请求成功之后的回调函数即可，示例代码如下：

$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
	console.log(res); //这里的res是服务器返回的数据
})

在这里插入图片描述

$.get()发起带参数的请求

使用$.get()函数发起带参数的请求时，示例代码如下：

$.get('http://www.liulongbin.top:3006/api/getbooks', {id: 1}, function(res) {
	console.log(res);
})

在这里插入图片描述

$.post()函数的语法

jQuery中$.post()函数的功能单一，专门用来发起post请求，从而向服务器提交数据。
$.post()函数的语法如下：

$.post(url, [data], [callback])

其中，三个参数各自代表的含义如下：

参数名	参数类型	是否必选	说明
`url`	`string`	`是`	`提交数据的地址`
data	object	否	`要提交的数据`
callback	function	否	数据提交成功时的`回调函数`

$.post()向服务器提交数据

使用$.post()向服务器提交数据的示例代码如下：

$.post(
	'http://www.liulongbin.top:3006/api/addbook', //请求的URL地址
	{bookname: '水浒传',author: '施耐庵',publisher: '上海图书出版社'}, //提交的数据
	function(res) { //回调函数
		console.log(res);
	}
)

在这里插入图片描述

$.ajax()函数的语法

相比于$.get()和$.post()函数，jQuery中提供的$.ajax()函数，是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置。

$.ajax()函数的基本语法如下：

$.ajax({
	type: '', //请求的方式，例如GET或POST
	url: '', //请求的URL地址
	data: {}, //这次请求要携带的数据
	success: function(res) {} //请求成功之后的回调函数
})

使用$.ajax()发起GET请求

使用$.ajax()发起GET请求时，只需要将type属性的值设置为‘GET’即可：

$.ajax({
	type: 'GET', //请求的方式
	url: 'http://www.liulongbin.top:3006/api/getbook', //请求的URL地址
	data: { id: 1}, //这次请求要携带的数据
	success: function(res) { //请求成功之后的回调函数
		console.log(res)
	}
})

在这里插入图片描述

使用$.ajax()发起POST

请求
使用$.ajax()发起POST请求时，只需要将type属性的值设置为‘POST’即可：

$.ajax({
	type: 'POST', //请求的方式
	url: 'http://www.liulongbin.top:3006/api/addbook', //请求的URL地址
	data: {  //要提交给服务器的数据
		bookname: '水浒传'，
		author: '施耐庵',
		publisher: '上海图书出版社'
	},
	success: function(res) { //请求成功之后的回调函数
		console.log(res)
	}
})

在这里插入图片描述

接口

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。

例如：
http://www.liulongbin.top:3006/api/getbook 获取图书列表的接口（Get请求）
http://www.liulongbin.top:3006/api/addbook 添加图书的接口（POST请求）

分析接口的请求过程

在这里插入图片描述

接口测试工具

为了验证接口能否被正常的访问，我们常常需要使用接口测试工具，来对数据接口进行检测。

好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。
工具：PostMan

访问PostMan的官方下载网址https://www.getpostman.com/downloads/，下载所需的安装程序后，直接安装即可。
在这里插入图片描述

接口文档

接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。

接口文档可以包含很多信息，也可以按需进行精简，不过一个合格的接口文档，应该包含以下6项内容，从而为接口的调用提供依据：

接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。
接口URL：接口的调用地址。
接口方式：接口的调用方式，如GET或POST。
参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。
返回实例（可选）：通过对象的形式，例举服务器返回数据的结构。

案例

案例一：图书管理

案例1用到的库和插件：
用到的CSS库 bookstrap.css
用到的javaScript库 jquery.js
用到的vs code插件 Bootstrap 3 Snippets
在这里插入图片描述

<link rel="styleheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js"></script>
<body style="padding: 15px;">
	<!-- 添加图书的Panel面板 -->
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">添加新图书<h3>
		</div>
		<div class="panel-body form-inline">
			<div class="input-group">
				<div class="input-group-addon">书名</div>
				<input type="text" class="form-control" id="iptBookname" placeholder="请输入书名" />
			</div>
			<div class="input-group">
				<div class="input-group-addon">作者</div>
				<input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者" />
			</div>
			<div class="input-group">
				<div class="input-group-addon">出版社</div>
				<input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社" />
			</div>
			<Button id="btnAdd" class="btn btn-primary">添加</Button>
		</div>
	</div>
	<!-- 图书的表格 -->
	<table class="table table-bordered table-hover">
		<thead>
			<tr>
				<th>id</th>
				<th>书名</th>
				<th>作者</th>
				<th>出版社</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="tb"></tbody>
	</table>
	<script>
		$(function (){
			//获取图书列表数据
			function getBookList() {
				$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
					//console.log(res);
					if(res.status !== 200) return alert('获取数据失败');
					var rows = [];
					$.each(res.data, function (i, item) {
						rows.push('<tr><td>'+item.id+'</td><td>'+item.bookname+'</td><td>'+item.author+'</td><td>'+item.publisher+'</td><td><a href="javascript:;" class="del" data-id="'+item.id+'">删除</a></td></tr>')
					})
					$('#tb').empty().append(rows.join(''));
				})
			}
			getBookList();
			
			/*$('.del').on('click', function () {
				console.log('ok');
			})*/
			// 通过代理的方式为动态添加的元素绑定点击事件
			$('tbody').on('click', '.del', function () {
				var id = $(this).attr('data-id');
				//console.log(id);
				$.get('http://www.liulongbin.top:3006/api/delbook',{id: id}, function (res) {
					if(res.status !== 200) return alert('删除图书失败!');
					getBookList();
				})
			})
			$(`#btnAdd`).on('click', function () {
				var bookname = $('#iptBookname').val().trim()
				var author = $('#iptAuthor').val().trim()
				var publisher = $('#iptPublisher').val().trim()
				if(bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {return alert('请填写完整的图书信息！');}
				//alert('ok!');
				$.post('http://www.liulongbin.top:3006/api/addbook',{bookname: bookname, author: author, publisher: publisher}, function(res) {
					if(res.status !== 201) return alert('添加图书失败！');
					getBookList();
					$('#iptBookname').val('');
					$('#iptAuthor').val('');
					$('#iptPublisher').val('');
				})
			})
		})
	</script>
</body>

案例二：聊天机器人

在这里插入图片描述

form表单与模板引擎

form表单的基本使用

表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务端进行处理。
在这里插入图片描述
表单由三个基本部分组成：

表单标签（<form>）
表单域（<input />等，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。）
表单按钮（<button>）

form标签的属性

<form>标签用来采集数据，<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。

属性	值	描述
action	URL 地址	规定当提交表单时，向何处发送表单数据
method	get或post	规定以何种方式把表单数据提交到action URL
enctype	application/x-www-form-unlencoded//multipart/form-data//text/plain	规定在发送表单数据之前如何对其进行编码
target	`_blank//_self//_parent//_top//_framename_`	规定在何处打开action URL

1.action

action属性用来规定当提交表单时，向何处发送表单数据。

action属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。

当<form>表单在未指定action属性值的情况下，action的默认值为当前页面的URL地址。

注意：当提交表单后，页面会立即跳转到action属性指定的URL地址。

2.target

target属性用来规定在何处打开action URL。

它的可选值有5个，默认情况下，target的值是_self，表示在相同的框架中打开action URL。

值	描述
`_blank`	`在新窗口中打开。`
`_self`	`默认，在相同的框架中打开。`
_parent	在父框架集中打开。（很少用）
_top	在整个窗口中打开。（很少用）
framename	在指定的框架中打开。（很用）

3.method

method属性用来规定以何种方式把表单数据提交到action URL。

它的可选值有两个，分别是get和post。

默认情况下，method的值为get，表示通过URL地址的形式，把表单数据提交到action URL。

注意：

get方式适合用来提交少量的、简单的数据。
post方法适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中，<form>表单的post提交方式用的最多，很少用get。例如登录、注册、添加数据等表单操作，都需要使用post方式来提交表单。

4.enctype

enctype属性用来规定在发送表单数据之前如何对数据进行编码。

它的可选值有三个，默认情况下，enctype的值为application/x-www-form-urlencoded，表示在发送前编码所有的字符。

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain	空格转换为“+”加号，但不对特殊字符编码。（很少用）

注意：

在涉及到文件上传的操作时，必须将enctype的值设置为multipart/form-data。
如果表单的提交不涉及到文件上传操作，则直接将enctype的值设置为application/x-www-form-urlencoded即可。

表单的同步提交及缺点

表单的同步提交：通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为。

缺点：

表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址，用户体验很差。
表单同步提交后，页面之前的状态和数据会丢失。

解决方案：表单只负责采集数据，Ajax负责将数据提交到服务器。

通过Ajax提交表单数据

监听表单提交事件

在jQuery中，可以使用如下两种方式，监听到表单的提交事件：

$('#form1').submit(function(e) {
	alert('监听到了表单的提交事件')
})
$('#form1').on('submit', function(e) {
	alert('监听到了表单的提交事件')
})

<script src="./lib/jquery.js"></script>
<form action="/login" id="f1">
	<input type="text" name="user_name" />
	<input type="password" name="password" />
	<button type="submit">提交</button>
</form>
<script>
	$(function () {
		//第一种方式
		/*$('#f1').submit(function () {
			alert('监听到了表单的提交事件')
		})*/
		
		//第二种方式
		$('#f1').on('submit', function() {
			alert('监听到了表单的提交事件！'
		})
	})
</script>

阻止表单默认提交行为

当监听到表单的提交事件以后，可以调用事件对象 event.preventDefault() 函数，来阻止表单的提交和页面的跳转，示例代码如下：

$('#form1').submit(function(e) {
	//阻止表单的提交和页面的跳转
	e.preventDefault();
})
$('#form1').on('submit', function(e) {
	//阻止表单的提交和页面的跳转
	e.preventDefault();
})

<script src="./lib/jquery.js"></script>
<form action="/login" id="f1">
	<input type="text" name="user_name" />
	<input type="password" name="password" />
	<button type="submit">提交</button>
</form>
<script>
	$(function () {
		//第一种方式
		/*$('#f1').submit(function (e) {
			alert('监听到了表单的提交事件')
			e.preventDefault();
		})*/
		
		//第二种方式
		$('#f1').on('submit', function(e) {
			alert('监听到了表单的提交事件！'
			e.preventDefault();
		})
	})
</script>

快速获取表单中的数据

1.serialize()函数

为了简化表单中数据的获取操作，jQuery提供了serialize()函数，其语法格式如下：

$(selector).serialize()

serialize()函数的好处：可以一次性获取到表单中的所有的数据。
在这里插入图片描述
注意：在使用serialize()函数快速获取表单数据时，必须为每个表单元素添加name属性。

<script src="./lib/jquery.js"></script>
<form action="/login" id="f1">
	<input type="text" name="user_name" />
	<input type="password" name="password" />
	<button type="submit">提交</button>
</form>
<script>
	$(function () {
		//第一种方式
		/*$('#f1').submit(function (e) {
			e.preventDefault();
			var data = $.(this).serialize()
			console.log(data)
		})*/
		
		//第二种方式
		$('#f1').on('submit', function(e) {
			e.preventDefault();
			var data = $.('#f1').serialize()
			console.log(data)
		})
	})
</script>

案例：评论列表

在这里插入图片描述

<link rel="stylesheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js"></script>
<body>
	<!-- 评论面板 -->
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">发表评论<h3>
		</div>
		<form class="panel-body" id="formAddCmt">
			<div>评论人：</div>
			<input type="text" class="form-control" name="username" />
			<div>评论内容：</div>
			<textarea class="form-control" name="content"></textarea>
			<button type="submit" class="btn btn-primary">发表评论</button>
		</form>
	</div>
	<!-- 评论列表 -->
	<ul class="list-group" id="cmt-list">
		<li class="list-group-item">
			<span class="badge" style="background-color: #F0AD4E;">评论时间：</span>
			<span class="badge" style="background-color: #5BC0DE;">评论人：</span>
			Item 1
		</li>
	</ul>
	<script>
		function getCommentList() {
			$.ajax({
				method: 'GET',
				url: 'http://www.liulongbin.top:3006/api/cmtlist3',
				success: function (res) {
					//console.log(res)
					if(res.status !== 200) return alert('获取评论列表失败！')
					//console.log('获取数据成功')
					var rows = []
					$.each(res.data, function (i, item) {
						var str = '<li class="list-group-item"><span class="badge" style="background-color: #F0AD4E;">评论时间：'+item.time+'</span><span class="badge" style="background-color: #5BC0DE;">评论人：'+item.username+'</span>'+item.content+'</li>'
						rows.push(str)
					})
					$('#cmt-list').empty().append(rows.join(''))
				}
			})
		}
		getCommentList()
		$(function (){
			$('#formAddCmt').submit(function (e) {
				e.preventDefault()
				var data = $(this).serialize()
				//console.log(data)
				$.post('http://www.liulongbin.top:3006/api/addcmt',data, function (res) {
					if(res.data !== 201) {
						return alert('发送评论失败！')
					}
					getCommentList()
					$('#formAddCmt')[0].reset()
				})
			})
		})
	</script>
</body>

模板引擎的基本概念

在这里插入图片描述
模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。

模板引擎的好处：

减少了字符串拼接操作。
使代码结构更清晰。
使代码更易于阅读与维护。

art-template模板引擎

art-template是一个简约、超快的模板引擎。中文官网首页为http://aui.github.io/art-template/zh-cn/index.html
在这里插入图片描述
（条越短性能越好）

art-template的安装

在浏览器中访问http://aui.github.io/art-template/zh-cn/index.html页面，找到下载链接后，鼠标右键，选择“链接另存为”，将art-template下载到本地，然后，通过<script>标签加载到网页上进行使用。
在这里插入图片描述

art-template模板引擎的基本使用

1.使用传统方式渲染UI结构

在这里插入图片描述

<div id="title"></div>
<div>姓名：<span id="name"></span></div>
<div>年龄：<span id="age"></span></div>
<div>会员：<span id="isVIP"></span></div>
<div>注册时间：<span id="regTime"></span></div>
<div>爱好：
	<ul id="hobby">
		<li>爱好1</li>
	</ul>
</div>
<script>
	var data = {
		title: '<h3>用户信息</h3>',
		name: 'zs',
		age: 20,
		isVIP: true,
		regTime: new Date(),
		hobby:{'吃饭', '睡觉', '打豆豆'}
	}
	$(function () {
		$('#name').html(data.name)
		$('#title').html(data.title)
		$('#age').html(data.age)
		$('#isVIP').html(data.isVIP)
		$('#regTime').html(data.regTime)
		var rows = []
		$.each(data.hobby, function (i, item){
			rows.push('<li>'+item+'</li>')
		})
		$('#hobby').html(rows.join(''))
	})
</script>

art-template的使用步骤

导入art-template
定义数据
定义模板
调用template函数
渲染HTML结构

<!-- 1.导入模板引擎 -->
<!-- 在window全局，多一个函数，叫做template（‘模板的id’，需要渲染的数据对象） -->
<script src="./lib/template-web.js"></script>
<body>
	<div id="container"></div>
	<!-- 3.定义模板 -->
	<!-- 3.1模板的HTML结果，必须定义到script中 -->
	<script type="text/html">
		<h1>{{name}}  -----  {{age}}</h1>
	</script>
	<script>
		//2.定义需要渲染的数据
		var data = { name: 'zs', age: 20 }
		//4.调用template函数
		var htmlStr = template('tpl-user', data)
		//console.log(htmlStr)
		//5.渲染HTML结构
		$('#container').html(htmlStr)
	</script>
</body>

art-template标准语法

art-template提供了 {{}}这种语法，在{{}}内可以进行变量输出，或循环数组等操作，这种{{}}语法在art-template中被称为标准语法。
在这里插入图片描述
在{{}}语法中，可以进行变量的输出、对象属性的输出、三元表达式的输出、逻辑或输出、加减乘除等表达式输出。

标准语法——原文输出

{{@ value}}

如果要输出的value值中，包含了HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染。

<!-- 1.导入模板引擎 -->
<!-- 在window全局，多一个函数，叫做template（‘模板的id’，需要渲染的数据对象） -->
<script src="./lib/template-web.js"></script>
<body>
	<div id="container"></div>
	<!-- 3.定义模板 -->
	<!-- 3.1模板的HTML结果，必须定义到script中 -->
	<script type="text/html">
		<h1>{{name}}  -----  {{age}}</h1>
		{{@ test}}
	</script>
	<script>
		//2.定义需要渲染的数据
		var data = { name: 'zs', age: 20， test: '<h3>测试原文输出</h3>' }
		//4.调用template函数
		var htmlStr = template('tpl-user', data)
		//console.log(htmlStr)
		//5.渲染HTML结构
		$('#container').html(htmlStr)
	</script>
</body>

标准语法——条件输出

如果要实现条件输出，则可以在{{}}中使用if...else if.../if的方式，进行按序输出。

{{if value}} 按需输出的内容 {{/if}}
{{if v1}} 按需输出的内容{{else if v2}} 按需输出的内容 {{/if}}

<!-- 1.导入模板引擎 -->
<!-- 在window全局，多一个函数，叫做template（‘模板的id’，需要渲染的数据对象） -->
<script src="./lib/template-web.js"></script>
<body>
	<div id="container"></div>
	<!-- 3.定义模板 -->
	<!-- 3.1模板的HTML结果，必须定义到script中 -->
	<script type="text/html">
		<h1>{{name}}  -----  {{age}}</h1>
		{{@ test}}
		<div>
			{{if flag ===0}}
				flag的值是0
				{{else if flag ===1}}
					flag的值是1
			{{/if}}
		</div>
	</script>
	<script>
		//2.定义需要渲染的数据
		var data = { name: 'zs', age: 20， test: '<h3>测试原文输出</h3>'， flag: 0 }
		//4.调用template函数
		var htmlStr = template('tpl-user', data)
		//console.log(htmlStr)
		//5.渲染HTML结构
		$('#container').html(htmlStr)
	</script>
</body>

标准语法——循环输出

如果要实现循环输出，则可以在{{}}内，通过each语法循环数组，当前循环的索引使用$index进行访问，当前的循环项使用$value进行访问。

{{each arr}}
	{{$index}}{{$value}}
{{/each}}

<!-- 1.导入模板引擎 -->
<!-- 在window全局，多一个函数，叫做template（‘模板的id’，需要渲染的数据对象） -->
<script src="./lib/template-web.js"></script>
<body>
	<div id="container"></div>
	<!-- 3.定义模板 -->
	<!-- 3.1模板的HTML结果，必须定义到script中 -->
	<script type="text/html">
		<h1>{{name}}  -----  {{age}}</h1>
		{{@ test}}
		<div>
			{{if flag ===0}}
				flag的值是0
				{{else if flag ===1}}
					flag的值是1
			{{/if}}
		</div>
		<ul>
			{{each hobby}}
				<li>索引是：{{$index}},循环项是：{{$value}}</li>
			{{/each}}
		</ul>
	</script>
	<script>
		//2.定义需要渲染的数据
		var data = { name: 'zs', age: 20， test: '<h3>测试原文输出</h3>'， flag: 1, hobby: ['吃饭', '睡觉', '打豆豆'] }
		//4.调用template函数
		var htmlStr = template('tpl-user', data)
		//console.log(htmlStr)
		//5.渲染HTML结构
		$('#container').html(htmlStr)
	</script>
</body>

标准语法——过滤器

在这里插入图片描述

{{ value | filterName}}

过滤器语法类似于管道操作符，它的上一个输出作为下一个输入。
定义过滤器的基本语法如下：

template.defaults.imports.filterName = function(value){/*return的处理结果*/}

<div>注册时间：{{regTime | dateFormat}}</div>

定义一个格式化时间的过滤器dateFormat如下：

template.defaults.imports.dateFormat = function(date) {
	var y = date.getFullYear()
	var m = date.getMonth() + 1
	var d = date.getDate()
	return y + '-' + m + '-' + d //主要，过滤器最后一定要return一个值
}

例子：

<!-- 1.导入模板引擎 -->
<!-- 在window全局，多一个函数，叫做template（‘模板的id’，需要渲染的数据对象） -->
<script src="./lib/template-web.js"></script>
<body>
	<div id="container"></div>
	<!-- 3.定义模板 -->
	<!-- 3.1模板的HTML结果，必须定义到script中 -->
	<script type="text/html">
		<h1>{{name}}  -----  {{age}}</h1>
		{{@ test}}
		<div>
			{{if flag ===0}}
				flag的值是0
				{{else if flag ===1}}
					flag的值是1
			{{/if}}
		</div>
		<ul>
			{{each hobby}}
				<li>索引是：{{$index}},循环项是：{{$value}}</li>
			{{/each}}
		</ul>
		<h3>{{regTime | dateFormat}}</h3>
	</script>
	<script>
		//定义处理时间的过滤器
		template.defaults.imports.dateFormat = function(date){
			//console.log(date)
			var y = date.getFullYear()
			var m = date.getMonth() + 1
			var d = date.getDate()
			return y + '-' + m + '-' + d
		}
		//2.定义需要渲染的数据
		var data = { name: 'zs', age: 20， test: '<h3>测试原文输出</h3>'， flag: 1, hobby: ['吃饭', '睡觉', '打豆豆']， regTime: new Date() }
		//4.调用template函数
		var htmlStr = template('tpl-user', data)
		//console.log(htmlStr)
		//5.渲染HTML结构
		$('#container').html(htmlStr)
	</script>
</body>

模板引擎的实现原理

正则与字符串操作

1.基本语法

exec()函数用于检索字符串中的正则表达式的匹配。如果字符串中有匹配的值，则返回该匹配值，否则返回null。

语法：

regExpObject.exec(string)

代码示例如下：

var str = 'hello'
var pattern = /o/
// 输出的结果["o", index: 4, input: "hello", groups: undefined]
console.log(pattern.exec(str))

4.分组

正则表达式中的()包起来的内容表示一个分组，可以通过分组来提取自己想要的内容，示例代码如下：

var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
console.log(patternResult)
//得到name相关的分组信息
//["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]

3.字符串的replace函数

replace()函数用在字符串中用一些字符替换另一些字符，语法格式如下：

var result = '123456'.replace('123','abc') //得到的result的值为字符串‘abc456’

示例代码如下：

var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])//replace函数返回值为替换后的新字符串
//输出的内容是：<div>我是name</div>
console.log(str)

4.多次replace

var str = '<div>{{name}}今年{{age}}岁了</div>'
var pattern = /{{\s*([a-zA-Z)+}\s*}/

var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) //输出 <div>name今年{{age}}岁了</div>

patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) //输出 <div>name今年age岁了</div>

patternResult = pattern.exec(str)
console.log(patternResult) //输出null

5.使用while循环replace

var str = '<div>{{name}}今年{{age}}岁了</div>'
var pattern = /{{\s*([a-zA-Z)+}\s*}/
var patternResult = null
while(patternResult = pattern.exec(str)){
	str = str.replace(patternResult[0], patternResult[1])
}
console.log(str) //输出 <div>name今年age岁了</div>

6.replace替换为真值

var data = { name: '张三', age: 20 }
var str = '<div>{{name}}今年{{age}}岁了</div>'
var pattern = /{{\s*([a-zA-Z)+}\s*}/
var patternResult = null
while(patternResult = pattern.exec(str)){
	str = str.replace(patternResult[0], data[patternResult[1]])
}
console.log(str)

实现简易模板引擎

1.实现步骤：

定义模板结构
预调用模板引擎
封装template函数
导入并使用自定义的模板引擎

2.定义模板结构

<!-- 定义模板结构 -->
<script type="text/html" id="tpl-user">
	<div>姓名：{{name}}</div>
	<div>年龄：{{age}}</div>
	<div>性别：{{gender}}</div>
	<div>住址：{{address}}</div>
</script>

3.预调用模板引擎

<script>
	//定义数据
	var data = { name: 'zs', age: 28, gender: '男', address: '北京'}
	//调用模板函数
	var htmlStr = template('tpl-user', data)
	//渲染HTML结构
	document.getElementById('user-box').innerHTML = htmlStr
</script>

4.封装template函数

function template(id, data) {
	var str = document.getElementById(id).innerHTML
	var pattern = /{{\s*([a-zA-Z)+}\s*}/
	var patternResult = null
	while(patternResult = pattern.exec(str)){
		str = str.replace(patternResult[0], data[patternResult[1]])
	}
}

5.导入并使用自定义的模板引擎

在这里插入图片描述

<div id="user-box"></div>
<!-- 定义模板结构 -->
<script type="text/html" id="tpl-user">
	<div>姓名：{{name}}</div>
	<div>年龄：{{age}}</div>
	<div>性别：{{gender}}</div>
	<div>住址：{{address}}</div>
</script>
<script>
	//定义数据
	var data = { name: 'zs', age: 28, gender: '男', address: '北京'}
	//调用模板引擎
	var htmlStr = template('tpl-user', data)
	//渲染HTML结构
	document.getElementById('user-box').innerHTML = htmlStr
</script>
<script>
	function template(id, data) {
		var str = document.getElementById(id).innerHTML
		var pattern = /{{\s*([a-zA-Z)+}\s*}/
		var patternResult = null
		while(patternResult = pattern.exec(str)){
			str = str.replace(patternResult[0], data[patternResult[1]])
		}
		retur str
	}
</script>