模板引擎在客户端的使用以及FormData在ajax中的使用

最新推荐文章于 2022-01-14 19:19:29 发布

就是有点怕怕

最新推荐文章于 2022-01-14 19:19:29 发布

阅读量174

点赞数

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

本文链接：https://blog.csdn.net/weixin_42371354/article/details/104636671

版权

Javascript 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

Ajax

6 篇文章 0 订阅

订阅专栏

1.模板引擎

众所周知模板引擎的作用是可以将数据和HTML拼接起来的。那么在客户端如何使用模板引擎将数据和HTML进行具体的拼接呢？
具体步骤如下：

下载 art-template 模板引擎库文件(template-web.js)并在 HTML 页面中引入库文件
准备 art-template 模板
告诉模板引擎将哪一个模板和哪个数据进行拼接
将拼接好的html字符串添加到页面中
通过模板语法告诉模板引擎，数据和html字符串要如何拼接

具体代码如下：

// 引入art-template
<script src="../js/template-web.js"></script>
<body>
    <div id="container"></div>
    <script id="tpOne" type="text/html">
        <h1>{{username}} {{age}}</h1>
    </script>
    <script>
        // 告诉模板引擎使用哪个模板和数据拼接
        // 第一个参数为 模板Id 第二个参数为 要使用的数据(对象) 返回值为拼接后的字符串
        var html = template('tpOne', {
            username: 'lxz',
            age: 22
        });
        // console.log(html);
        document.querySelector('#container').innerHTML = html;
    </script>
</body>

2.FormData的使用

FormData有两个主要的作用：

模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
异步上传二进制文件

**FormData的使用步骤如下：

准备 HTML 表单（客户端中表单无需提交地址和使用js进行获取）
将HTML表单进行转化为FormData对象
提交表单对象

使用FormData有以下注意点：

1. FormData只能用于post方式的表单

2. 服务器端 bodyParser 模块不能解析 formData 对象表单数据，我们需要使用 formidable 模块进行解析

具体代码使用如下：

<body>
	<!-- 创建普通的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请求
			xhr.send(formData);
			// 监听xhr对象下面的onload事件
			xhr.onload = function () {
				// 对象http状态码进行判断
				if (xhr.status == 200) {
					console.log(xhr.responseText);
				}
			}
		}
	</script>
</body>

/********************服务器端主要代码*********************/
server.post('/formData', (req, res) => {
	// 创建formidable表单解析对象
	const form = new formidable.IncomingForm();
	// 解析客户端传递过来的FormData对象
	form.parse(req, (err, fields, files) => {
		res.send(fields);
	});
});

FormData 对象中的实例方法

1.获取表单对象中属性值：

formData.get('属性名');

2.设置表单对象中的属性值：

formData.set('属性名','属性值');

3.删除表单对象中的属性值：

formData.delete('属性名');

4.向表单对象中追加属性值

formData.append('属性名','属性值');

在FormData的实例方法中,set和append的区别是，在属性名存在的情况下，set会覆盖已有的属性值，append会保留两个值(node 服务器中会默认返回第二个值)

FormData 实现二进制文件上传并且进行文件上传过程的展示（图片能够预览）的核心代码：（服务器端需要使用formidable将文件上传的地址进行处理后返回给客户端）

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
	<style type="text/css">
		.container {
			padding-top: 60px;
		}
		.padding {
			padding: 5px 0 20px 0;
		}
	</style>
</head>
<body>
	<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>
</body>
</html>

就是有点怕怕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模板引擎在客户端的使用以及FormData在ajax中的使用

1.模板引擎众所周知模板引擎的作用是可以将数据和HTML拼接起来的。那么在客户端如何使用模板引擎将数据和HTML进行具体的拼接呢？具体步骤如下：下载 art-template 模板引擎库文件(template-web.js)并在 HTML 页面中引入库文件准备 art-template 模板告诉模板引擎将哪一个模板和哪个数据进行拼接将拼接好的html字符串添加到页面中通过模板语法告...
复制链接

扫一扫

专栏目录