前端表单提交的发展史

·  阅读 450

前言

前端开发中,表单应该是我们最常见的页面板块了。那么表单数据提交过程当中, 我们利用到了哪些东西呢,简单了解一下。

在上古时代老旧的表单信息提交中 ,我们都是设定 form 表单的 action 属性 进行提交。 但是他会刷新一次页面。在前端的不断发展当中, 在 XMLHttpRequest 出现之后,这种方式被使用的越来越少了。那么我们接下说说关于表单的上传。

1. 使用 XMLHttpRequest

大多数使用场景当中,我们都是以这种方式进行使用,如果你对 form 标签够属性,你应该知道下面这几项属性:

  1. action : 处理表单提交的 URL

  2. enctype : 当 method 属性值为 post 时,表单的内容提交给服务器的 MIME 类型,

    • application/x-www-form-urlencoded:未指定属性时的默认值。
    • multipart/form-data:当表单包含 type=file 的 <input> 元素时使用此值。
    • text/plain:出现于 HTML5,用于调试。
  3. method : 提交方式, 值为 post , get

注意: 使用 GET 方法(这种情况下 enctype 属性会被忽略)

现在,我们提交一个表单,它里面有两个字段,分别被命名为 foo 和 baz。如果你用 POST 方法,那么服务器将会接收到一个字符串类似于下面三种情况之一,其中的区别依赖于你采用何种编码类型:

  • 方法:POST;编码类型:application/x-www-form-urlencoded(默认):

    Content-Type: application/x-www-form-urlencoded
    
    foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A
    复制代码
  • 方法:POST;编码类型:text/plain

    Content-Type: text/plain
    
    foo=bar
    baz=The first line.
    The second line.
    复制代码
  • 方法:POST;编码类型:multipart/form-data

    Content-Type: multipart/form-data; boundary=---------------------------314911788813839
    
    -----------------------------314911788813839
    Content-Disposition: form-data; name="foo"
    
    bar
    -----------------------------314911788813839
    Content-Disposition: form-data; name="baz"
    
    The first line.
    The second line.
    
    -----------------------------314911788813839--
    复制代码

    不知道你发现没有,最后一种格式,实际上我们只是一个字符串,并不是 new FormData() 这样子的格式。

使用 AJAX 的例子更为复杂, 使用 XMLHttpRequest - Web API 接口参考 | MDN (mozilla.org)

第二种方式(使用 FormData API)是最简单最快捷的,但是缺点是被收集的数据无法使用 JSON.stringify() 转换为一个 JSON 字符串。而只使用 AJAX 则更为复杂,但也更灵活、更强大。

2. 使用new FormData 对象

FormData 构造函数能使你编译一个键/值对的集合,然后使用 XMLHttpRequest 发送出去。其主要用于发送 form 数据,但是也能被单独用来传输 form 中用户指定的数据, 又或者是增加 form 中不存在的数据。传输的数据格式与表格使用 submit() 方法发送数据的格式一致,如果该表格的编码类型被设为 "multipart/form-data". FormData 对象可以被结合 XMLHttpRequest 的多种方法利用。

var formData = new FormData();

formData.append("foo", "bar");
formData.append("baz", 'The first line.The second line.');

// 增加input type='file' 选择的文件
formData.append("userfile", fileInputElement.files[0]);

// 附件额外数据
formData.append("accountnum", 123456); //数字123456会被立即转换成字符串 "123456"

复制代码

加入下面代码,也能发送一个带有文件的表单数据

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);
复制代码

结尾

而现如今,我们可能只是单纯的使用 form 进行表单数据的收集, 在提交后端的时候 却更多的使用 XMLHttpRequest 结合json 进行数据的传递。而文件的上传被单独划分为一个专门的接口,又或者是 oss 。只负责文件的上传,简而言之: 文件的上传是单独了。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改