前后端分离之form表单的提交

前后端分离之后，前后端基本呈现数据驱动的局面，后端组织数据发送给前端，前端整理数据传输给后端。

表单默认行为改变

原有的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格式，服务器获取到文件字段，以二进制解析即可。