前后端分离之后，前后端基本呈现数据驱动的局面，后端组织数据发送给前端，前端整理数据传输给后端。
表单默认行为改变
原有的form表单会随着提交而跳转到另外一个页面，但是前后端分离之后，前端多是SPA页面，在不指定action时会提交到当前页面，指定action会跳转到其它页面，而无论哪一种操作，都会引发当前页面的刷新，导致数据提交失败。并且让后端再返回一个页面是一种不现实的操作，那么必须阻止表单的默认行为。
js提供了preventDefault方法来阻止表单的提交用法如下。
<form action="" onsubmit="submitUserInfo(event)" method="POST">
<label for="username"></label>
<input type="text" name="username">
<button type="submit">提交</button>
</form>
<script>
function submitUserInfo(e){
e.preventDefault() //阻止表单提交
console.log(e)
}
</script>表单数据读取
在前后端分离之前，不需要关系表单的读取，但是分离之后，采用ajax提交表单，此时很有必要知道，我们的表单包含了哪些数据。
在常见的MVVM框架中数据双向绑定来解决这个事情。例如vue可以在data当中设置表单的关联值，作为中间媒介。这样以来在视图和js代码中可以双向获取到该值。j
原生的js对表单提交也提供技术支持，formdata 接口就是js操作表单的数据的方式。
<form action="" onsubmit="submitUserInfo(event)" method="POST">
<label for="username"></label>
<input type="text" name="username">
<button type="submit">提交</button>
</form>
<script>
function submitUserInfo(e) {
e.preventDefault()
const formdata = new FormData(e.target)
console.log(formdata.get("username"));
}
</script>如上所示，就是FormData获取表单值的方式。关于formdata的详尽用法可参考文档。https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
关于请求头
原始的html表单提交，并不需要设置请求头，但是对于前后端分离之后，js代码并不能识别文件的内容形式，那么必须额外的告诉后端，我发送的是什么数据。
那么不得不在请求头指出文件格式：
formdata 特有的格式是：content-type : "multipart/form-data"
如果是json格式，得设置为：content-type : "content-type": "application/json"
那么前端程序员有必要了解各种类型
文件上传
情况一：
文件上传的方案比较多种多样了，比如刚刚从前后端分离过来，通常会把内容和文件一起发送给服务器。那么直接可在formData当中找到上传的文件，并且将formdata发送到服务器。
uploadToExcel() {
const formData = new FormData();
formData.append("file", this.currentUploadFile);
formData.append(this.uploadType, this.uploadTypeValue);
this.$axios
.post(
this.url,
formData,
{
onUploadProgress: progressEvent => {
this.process =
((progressEvent.loaded / progressEvent.total) * 100) | 0;
}
},
{ headers: { "Content-Type": "multipart/form-data" } }
)
.then(response => {
let data = response.data;
if (data.code !== 0) {
this.$message.error("上传失败");
} else {
this.uploadFileList = [];
this.currentUploadFile = null;
}
})
.catch(error => {
console.log("服务器故障");
});
},浏览器数据请求如下
情况二：
可以在formdata中读出文件，并组织成json格式，服务器获取到文件字段，以二进制解析即可。