Ajax学习笔记（二）--- 模板引擎和FormData 对象

最新推荐文章于 2023-01-19 15:30:00 发布

努力的小朱同学

最新推荐文章于 2023-01-19 15:30:00 发布

阅读量218

点赞数 1

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_45092437/article/details/120629813

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、模板引擎

1、概念

原生 ajax 项目中存在数据和HTML字符串拼接导致代码混乱，拼接容易出错，业务逻辑和用户界面混合，代码不易维护的问题。为了解决这些问题我们引入模板引擎这个工具。

art-template 是一个简约、超快的模板引擎，拥有接近 JavaScript 渲染极限的性能。使用模板引擎提供的模板语法可以使数据和HTML字符串拼接的更加美观，代码易于维护。模板引擎能够使用户界面的数据拼接和JavaScript业务逻辑分离，增加程序的可扩展性。最重要的是可以提高开发效率。

art-template官方文档：http://aui.github.io/art-template/zh-cn/

2、模板语法

① 输出

将数据原文显示到模板中，语法： {{ value }}。

<!-- 1. 下载 art-template 模板引擎库文件，并将模板引擎的库文件引入到当前页面 -->
<script src="/js/template-web.js"></script>

<div id="container"></div>

<!-- 2.准备art-template模板 -->
<script type="text/html" id="tpl">
	// 5.通过模板语法告诉模板引擎，数据和html字符串要如何拼接
	<h1>{{username}} {{age}}</h1>
</script>
<script type="text/javascript">
	// 3.告诉模板引擎将那个数据和哪个模板进行拼接
	// 1) 模板id 2)数据 对象类型
	// 方法的返回值就是拼接好的html字符串
	var html = template('tpl', {username: 'zhangsan', age: 30});
    // 4.将拼接好的html字符串添加到页面中
	document.getElementById('container').innerHTML = html;
</script>

② 原文输出

如果要显示的数据中包含 HTML 标签，在默认情况下为了安全，模板引擎不会解析标签，只会将其原文输出。如果想要解析这些标签的需要用到原文输出语法：{{@ value }}

	<div id="container"></div>
	<script src="js/template-web.js"></script>
	<script type="text/html" id="tpl">
		<div>
			<span>姓名：{{@ name}}</span>
			<span>年龄：{{age}}</span>
		</div>
	</script>
	<script>
		var data = {
			name: '<b>李四</b>',
			age: 30
		}
		// 这是告诉模板引擎将模板id为tpl的模板和data数据对象进行拼接
		var html = template('tpl', data);
		document.getElementById('container').innerHTML = html;
	</script>

③ 条件判断

根据提前设置好的限制条件来判断某些元素和信息是否显示，需要用到条件判断，语法：{{if 条件}} … {{/if}} 或 {{if v1}} … {{else if v2}} … {{/if}}

<div id="container"></div>
	<script src="js/template-web.js"></script>
	<script type="text/html" id="tpl">
		<div>
			<span>姓名：{{@ name}}</span>
			<span>年龄：{{age}}</span>
		</div>
		{{if age > 18}}
			<div>年龄大于18</div>
		{{else}}
			<div>年龄小于18</div>
		{{/if}}
	</script>
	<script>
		var data = {
			name: '<b>李四</b>',
			age: 25
		}
		// 这是告诉模板引擎将模板id为tpl的模板和data数据对象进行拼接
		var html = template('tpl', data);
		document.getElementById('container').innerHTML = html;
	</script>

④ 循环

想要遍历一个数组中的所有元素，则需要用到循环语法，语法为：{{each target}} {{ $KaTeX parse error: Expected 'EOF', got '}' at position 6: index}̲} {{$ value}} {{/each}} 。 $i n d e x 代表数组下标，$ value 表示数组的值。

<div id="container"></div>
	<script src="js/template-web.js"></script>
	<script type="text/html" id="tpl">
		<ul>
			{{each data}}
			<li>
				<span>姓名：{{$value.name}}</span>
				<span>年龄：{{$value.age}}</span>
			</li>
			{{/each}}
		</ul>
	</script>
	<script>
		// 这是告诉模板引擎将模板id为tpl的模板和data数据对象进行拼接
		var html = template('tpl', {
			data: [{
				name: '张三',
				age: 15
			}, {
				name: '李四',
				age: 20
			}, {
				name: '王五',
				age: 10
			}]
		});
		document.getElementById('container').innerHTML = html;
	</script>

⑤ 模板变量

模板中可以访问该页面中的全局变量、函数，如果想要访问非全局的变量和函数，则需要特定语法进行导入，但是要注意，淡入语句一定要在模板拼接语句之前，才能起效。

js中导入语法：template.defaults.imports.变量名 = 变量值;

模板中使用语法：$imports.变量名称

	<div id="container"></div>
	<script src="js/template-web.js"></script>
	<script type="text/html" id="tpl">
		<div>当前时间是：{{$imports.dateFormat(date)}}</div>
	</script>
	<script>
		window.onload = function () {
			// 将方法导入到模板中
			template.defaults.imports.dateFormat = dateFormat;
			// 这是告诉模板引擎将模板id为tpl的模板和data数据对象进行拼接
			var html = template('tpl', {
				date: new Date()
			});
			document.getElementById('container').innerHTML = html;
			function dateFormat(date) {
				return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
			}
		}
	</script>

3、综合案例

在这里插入图片描述

// 搜索框输入文字自动提示

<div class="container">
		<div class="form-group">
			<input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
			<ul class="list-group" id="list-box">
				
			</ul>
		</div>
	</div>
	<!-- 引入封装的 ajax 函数 -->
	<script src="/js/ajax.js"></script>
	<!-- 引入模板引擎 -->
	<script src="/js/template-web.js"></script>
	<!-- 准备模板引擎的模板 -->
	<script type="text/html" id="tpl">
		// 循环遍历数据
		{{each result}}  
			<li class="list-group-item">{{$value}}</li>
		{{/each}}
	</script>
	<script>
		// 获取搜索框
		var searchInp = document.getElementById('search');
		// 获取提示文字的存放容器
		var listBox = document.getElementById('list-box');
		// 存储定时器的变量
		var timer = null;
		// 当用户在文本框中输入的时候触发
		searchInp.oninput = function () {
			// 清除上一次开启的定时器
			clearTimeout(timer);
			// 获取用户输入的内容
			var key = this.value;
			// 如果用户没有在搜索框中输入内容
			if (key.trim().length == 0) {
				// 将提示下拉框隐藏掉
				listBox.style.display = 'none';
				// 阻止程序向下执行
				return;
			}

			// 开启定时器 让请求延迟发送
			timer = setTimeout(function () {
				// 向服务器端发送请求
				// 向服务器端索取和用户输入关键字相关的内容
				ajax({
					type: 'get',
					url: 'http://localhost:3000/searchAutoPrompt',
					data: {
						key: key
					},
					success: function (result) {
						// 使用模板引擎拼接字符串
						var html = template('tpl', {result: result});
						// 将拼接好的字符串显示在页面中
						listBox.innerHTML = html;
						// 显示ul容器
						listBox.style.display = 'block';
					}
				})
			}, 800)
			
		}
	</script>

二、FormData 对象

1、概念

FormData 可以通过构造方法将 HTML 表单映射成为表单对象，能自动将表单对象中的数据拼接成请求参数的格式。简单来说，就是将 form 表单元素的 name 和 value 进行组合，实现表单数据的序列化拼接。另一个重要的功能是：异步上传文件。

但是 FormData 对象不能用于 get 请求，因为该对象需要被传递到 send() 方法中，而 get 请求的请求参数只能放再 url 后面。而且在服务器端，我们需要使用 formidable 模块对 FormData 对象进行解析。

2、使用

	<!-- 创建普通的html表单 -->
	<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="button" id="btn" value="提交">
	</form>
	<script type="text/javascript">
		// 获取按钮
		var btn = document.getElementById('btn');
		// 获取表单
		var form = document.getElementById('form');
		// 为按钮添加点击事件
		btn.onclick = function () {
			// 将普通的html表单转换为表单对象
			var formData = new FormData(form);
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			xhr.open('post', 'http://localhost:3000/formData');
			// 发送ajax请求 必须通过 send 方法提交
			xhr.send(formData);
			// 监听xhr对象下面的onload事件
			xhr.onload = function () {
				// 对象http状态码进行判断
				if (xhr.status == 200) {
					console.log(xhr.responseText);
				}
			}
		}
	</script>

3、实例方法

FormData 对象的实例方法有很多，在这我们只列举一些常用的：

方法	功能
formData.get(‘key’)	获取表单对象中的某条属性的值，如果有多个，则返回第一个。
formData.set(‘key’,‘value’)	设置表单对象中属性的值，如果属性不存在则添加这条属性，如果属性存在则覆盖原来的值
formData.delete(‘key’)	删除表单对象中的某条属性
formData.append(‘key’,‘value’)	向表单对象中追加属性值，如果属性不存在则添加这条属性，如果属性存在则保留两个值
formData.getAll(‘key’)	返回一个包含表单对象中与某条属性所有的值的数组
formData.has(‘key’)	返回一个布尔值，表示表单对象是否含有某条属性
formData.entries()	返回一个包含所有键值对的 iterator 对象

案例代码：

	<!-- 创建普通的html表单 -->
	<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="button" id="btn" value="提交">
	</form>
	<script type="text/javascript">
		// 获取按钮
		var btn = document.getElementById('btn');
		// 获取表单
		var form = document.getElementById('form');
		// 为按钮添加点击事件
		btn.onclick = function () {
			// 将普通的html表单转换为表单对象
			var formData = new FormData(form);

			/*
				get('key') 获取表单对象属性的值
				set('key', 'value') 设置表单对象属性的值
				delete('key') 删除表单对象属性中的值
			*/
		
			console.log(formData.get('username'));

			// 如果设置的表单属性存在 将会覆盖属性原有的值
			formData.set('username', 'itcast');
            // 如果设置的表单属性存在 将会保留两个值
			formData.append('username', 'itheima');
			// 如果设置的表单属性不存在 将会创建这个表单属性
			formData.set('age', 100);
			// 删除用户输入的密码
			formData.delete('password');

			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			xhr.open('post', 'http://localhost:3000/formData');
			// 发送ajax请求
			xhr.send(formData);
			// 监听xhr对象下面的onload事件
			xhr.onload = function () {
				// 对象http状态码进行判断
				if (xhr.status == 200) {
					console.log(xhr.responseText);
				}
			}

			// 创建空的表单对象
			var f = new FormData();
			f.append('sex', '男');
			console.log(f.get('sex'));
		}
	</script>

4、异步文件上传

<div class="container">
		<div class="form-group">
			<label>请选择文件</label>
			<input type="file" id="file">
			<div class="padding" id="box">
				<!--<img src="" class="img-rounded img-responsive">-->
			</div>
			<div class="progress">
				<div class="progress-bar" style="width: 0%;" id="bar">0%</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		// 获取文件选择控件
		var file = document.getElementById('file');
		// 获取进度条元素
		var bar = document.getElementById('bar');
		// 获取图片容器
		var box = document.getElementById('box');
		// 为文件选择控件添加onchanges事件
		// 在用户选择文件时触发
		file.onchange = function () {
			// 创建空的formData表单对象
			var formData = new FormData();
			// 将用户选择的文件追加到formData表单对象中
			formData.append('attrName', this.files[0]);
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			xhr.open('post', 'http://localhost:3000/upload');
			// 在文件上传的过程中持续触发该事件  用来显示文件上传百分比
			xhr.upload.onprogress = function (ev) {
				// ev.loaded 文件已经上传了多少
				// ev.total  上传文件的总大小
				var result = (ev.loaded / ev.total) * 100 + '%';
				// 设置进度条的宽度
				bar.style.width = result;
				// 将百分比显示在进度条中
				bar.innerHTML = result;
			}
			// 发送ajax请求
			xhr.send(formData);
			// 监听服务器端响应给客户端的数据
			xhr.onload = function () {
				// 如果服务器端返回的http状态码为200
				// 说明请求是成功的
				if (xhr.status == 200) {
					// 将服务器端返回的数据显示在控制台中
					var result = JSON.parse(xhr.responseText);
					// 动态创建img标签
					var img = document.createElement('img');
					// 给图片标签设置src属性
					img.src = result.path;
					// 当图片加载完成以后
					img.onload = function () {
						// 将图片显示在页面中
						box.appendChild(img);
					}
				}
			}

		}
	</script>

努力的小朱同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Ajax学习笔记（二）--- 模板引擎和FormData 对象

一、模板引擎1、概念使用模板引擎的模板语法可以把数据和 HTML 拼接起来，并显示到页面中。可以与 ajax 结合使用，实现页面的局部刷新。2、使用<script src="/js/template-web.js"></script><div id="container"></div><!-- 2.准备art-te
复制链接

扫一扫