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>
来源：CSDN
作者：就是有点怕怕
链接：https://blog.csdn.net/weixin_42371354/article/details/104636671