form表单/serialize 函数

form表单

表单：在网页中，表单主要负责数据采集功能

三个组成部分

表单标签

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

表单域

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

注：每个表单域必须包含 name 属性，否则用户填写的信息无法被采集到

表单按钮

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

注：type="submit" 表示提交按钮的意思

表单的三个专有属性

例

<form
  class="card-body bg-light"
  id="addForm"
  action="http://www.itcbc.com:3006/api/addbook"
  method="post"
  enctype="application/x-www-form-urlencoded"
      ></form>

表单拓展

// 这种写法不会有默认行为
<input type="button" value=""/>

表单细节

axios支持的参数格式有： key=value&key=value {key:value,key:value} formdata

所有场景下，传递给服务器的参数都是 键值对 的形式 表单元素的name属性的值就是参数的 键 且name属性的值一定要参照后台接口的说明，不能错

表单值(中文)提交给服务器的时候，是编码，到了后台，会自己解码，我们也可以自己解码

// 解码操作 
decodeURI('编码')
decodeURIComponent('编码')

serialize 函数

当界面中有多项元素需要获取时，一个个的获取较为麻烦

jQuery 的 serialize() 函数能够一次性获取到表单中采集的数据

语法

// 它可以获取当前表单中 拥有'name'属性的表单元素的value值，生成key=value&key=value 的形式
// key 表示当前'name'属性值 value 表示当前用户输入的值
$('表单元素的选择器').serialize();

注：

该方法是jQuery封装的，使用时必须引入jQuery 使用serialize()，各表单域必须有 name 属性 使用该方法得到的结果是一个查询字符串结构：name=value&name=value 该方法 能够 获取 隐藏域的值 该方法不能得到禁用状态的值 该方法不能得到文件域中的文件信息，所以不能完成文件上传

案例

<form>
  用户名： <input type="text" name="username" /> <br />
  性别： <input type="radio" name="gender" value="男" /> 男
  <input type="radio" name="gender" value="女" /> 女 <br />
  爱好： <input type="checkbox" name="hobby" value="write code" /> 写代码
  <input type="checkbox" name="hobby" value="debug" /> 调bug
  <input type="checkbox" name="hobby" value="ask" /> 提问题 <br />
  学科：
  <select name="subject">
    <!-- 获取下拉列表数据的时候，如果没有设置 value属性，那么就获取option标签之间的内
容，如果设置的value属性，就优先获取value -->
    <option value="1">大前端</option>
    <option value="2">java</option>
    <option value="3">测试</option>
  </select>
  <input type="button" value="提交" class="btn" />
</form>
<script src="./lib/jquery.js"></script>
<script>
  document.querySelector('.btn').addEventListener('click', function() {
    // serialize获取指定表单中拥有name属性的表单元素的value值
    console.log($('form').serialize())
  })
</script>