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

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

表单默认行为改变

原有的form表单会随着提交而跳转到另外一个页面,但是前后端分离之后,前端多是SPA页面,在不指定action时会提交到当前页面,指定action会跳转到其它页面,而无论哪一种操作,都会引发当前页面的刷新,导致数据提交失败。并且让后端再返回一个页面是一种不现实的操作,那么必须阻止表单的默认行为。

js提供了preventDefault方法来阻止表单的提交用法如下。

表单数据读取

在前后端分离之前,不需要关系表单的读取,但是分离之后,采用ajax提交表单,此时很有必要知道,我们的表单包含了哪些数据。

在常见的MVVM框架中数据双向绑定来解决这个事情。例如vue可以在data当中设置表单的关联值,作为中间媒介。这样以来在视图和js代码中可以双向获取到该值。j

前后端分离之form表单的提交_第1张图片

原生的js对表单提交也提供技术支持,formdata 接口就是js操作表单的数据的方式。

如上所示,就是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格式,服务器获取到文件字段,以二进制解析即可。

你可能感兴趣的:(前端基础)