form 表单

表单的三个组成部分

网页中采集数据的表单由三个部分组成，分别是：表单标签、表单域、表单按钮。

表单标签

HTML 的 <form> 就是表单标签，它是一个“容器”，用来将页面上指定的区域划定为表单区域

表单域

表单域提供了采集用户信息的渠道，常见的表单域有：input、textarea、select 等。

表单按钮

当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器。

表单属性

<form>标签最重要的 3 个属性分别是 action、method 和 enctype。

action属性：类似于axios中的url，用来设置请求地址

method属性：类似于axios中的method，用来设置请求方式

enctype属性：用来设置数据内容类型

属性	设置值	说明
action	接口的 url 地址	把表单采集到的数据，提交到哪个接口中
method	GET 或 POST	数据的提交方式（默认值为 GET）
enctype	application/x-www-form-url encodedmultipart/form-data text/plain（很少用）	数据的编码格式。 具体指的是： 把表单数据提交给服务器之前， 如何对将要提交的数据进行编码 （默认值 application/x-www-form-urlencoded）

注意：enctype 属性只能搭配 POST 提交方式一起使用；如果是 GET 提交，则 enctype 没有意义！

提交表单数据

以 GET 方式提交表单数据

在

标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 GET：

<form action="http://www.liulongbin.top:3006/api/post" method="GET" >
  用户名： <input type="text" name="uname">
  <br>
  <br>
  密码：<input type="password" name="pwd" id="">
  <br>
  <br>
  <input type="submit" value="提交">

</form>

注意：由于 method 属性的默认值就是 GET，因此上述的 method="GET" 可以被省略！

以 POST 方式提交表单数据

在 标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 POST，并通过 enctype 属性指定数据的编码方式为 application/x-www-form-urlencoded：

<form action="http://www.liulongbin.top:3006/api/post" method="post" enctype="application/x-www-form-urlencoded" >
  用户名： <input type="text" name="uname">
  <br>
  <br>
  密码：<input type="password" name="pwd" id="">
  <br>
  <br>
  <input type="submit" value="提交">

</form>

注意：由于 enctype 的默认值就是 application/x-www-form-urlencoded，因此上述的 enctype 可以被省略！

表单提交的问题

<form> 表单身兼数职：既负责采集数据，又负责把数据提交到服务器！表单的默认提交行为会导致页面的跳转。

解决方案：

• form表单只负责采集数据；
• Ajax 负责将数据提交到服务器。（符合：职能单一的原则）

let form = document.querySelector('form')
form.addEventListener('submit', function (e) {
  e.preventDefault()
  axios({
    method: 'post',
    url: '请求地址',
    data: {
      uname : '12',
      age: 18
    }    
  }).then(function(res){
  })
})

jQuery 的 serialize() 函数

jQuery 的 serialize() 函数能够一次性获取到表单中采集的数据，它的语法格式如下：

$('表单元素的选择器').serialize()

enctype 三个可选值之间的区别

只有 method 属性的值等于 POST 时，才有必要设置 enctype 属性。

作用：用来设置表单提交数据内容类型（格式）

取值：

1.application/x-www-form-urlencoded：默认值

​ 当前enctype属性为默认值时，那么提交的数据格式：属性=值&属性=值

2.multipart/form-data

​ 当前enctype属性为multipart/form-data时，数据体发送到服务端格式为：

​ ------WebKitFormBoundary1MUZ5FtfAmoXqBCQ

​ Content-Disposition: form-data; name="uname"

​ 12312

​ ------WebKitFormBoundary1MUZ5FtfAmoXqBCQ

​ Content-Disposition: form-data; name="pwd"

​ 11

​ ------WebKitFormBoundary1MUZ5FtfAmoXqBCQ--

3.text/plain（基本不用，与默认模式提交的数据格式相同）

​ 当前enctype属性为text/plain时，数据体发送到服务端格式为：

​ 属性=值

​ 属性=值

注：当前表单向服务器提交数据时，必须给标签添加name属性，否则获取不到提交数据