概述

1. 表单提交的原理
2. 表单提交的方式

1. 表单提交的原理

前端与后端的交互方式，除了http协议，还有websocket协议等等。
但是表单的提交几乎都是遵循http（https）协议。
换句话说，客户端和服务端交互的媒介就是请求报文和响应报文。

2. 表单提交的方式

不依靠JS

1. 传统方法

这种方式就是点击Form表单的submit按钮，让浏览器根据Form表单的action和method把表单数据，还有其他一些相关的数据（比如请求头）合并成请求报文；而接受响应报文则是通过Form表单的target属性来接收。

2. target为iframe

步骤为：

1. 新建一个iframe，设置属性为不可见。

visibility: hidden;

2. 还有设置load事件，并用如下方式接收来自服务器的响应

iframe.addListener('', function() {
  iframe.contentDocument.body.textContent || iframe.contentWindow.document.body.textContent;
})

3. 最后把form的target设置为该iframe
4. 当表单submit的时候就不会重定向了

this.form.submit();

依靠JS、XHR

这种方式借助XMLHTTPRequest对象或Fetch API，优点是更灵活（可以自定义校验表单的细节），可以异步发起请求等等。

请求头常用的Content-Type：

1. application/x-www-form-urlencoded
2. application/json
3. multipart/form-data

上面的Content-Type其实只是一个标识，主要给服务器参考，具体要怎么解析数据由服务器决定。毕竟HTTP协议是纯文本的，请求体的内容是不受限制，但更多的是约定俗成。

根据上面的描述，构建请求体的方式有：

1. 用字符串拼接的方式

“application/x-www-form-urlencoded”：通过“=”、“&”把表单数据串联起来。
“application/json”：把json对象序列化。
“multipart/form-data”：比较复杂，需要分隔符分割每部分的内容，包括上传的内容。

2. 借助FormData

这就比较强大了。通过传入键值对来模拟表单控件，甚至是二进制文件。该对象可以直接被XHR对象传送到服务器，当然了期间构建请求体的过程是由XHR对象来完成。

new FormData (form? : HTMLFormElement)

formData.append(name, value[, filename]);FormData.set 和 append() 的区别在于，如果指定的键已经存在， FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。
formData.set(name, value[, filename[);对 FormData 对象里的某个 key 设置一个新的值，如果该 key 不存在，则添加。
formData.get(name);返回FormData对象中和指定的键关联的第一个值，如果你想要返回和指定键关联的全部值，那么可以使用getAll()方法。
formData.getAll(name);返回该 FormData 对象指定 key 的所有值。
formData.has(name);
formData.delete(name);从 FormData 对象中删除指定 key 和它对应的 value(s)

formData.entries();
formData.keys();
formData.values();

参考

发送表单数据
使用JavaScript发送表单
XMLHttpRequest
FormData
FormData 对象的使用