form 的基本使用
1、什么是表单
表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并通过标签的提交操作，把用户收集到的信息发送到 Web 服务器进行处理。
2、表单的组成部分
- 表单标签
就是我们常说的form表单，就是所谓的表单标签。
- 表单域
也就是表单标签之间的部分，这里面包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等.各种用于采集用户信息的标签。
这里面还可以包含一个特殊的部分，隐藏域：
隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式：
- 表单按钮
既然采集完用户对应输入的信息了，我还还需要将其提交到服务器，这时就需要借助提交按钮了。按钮的种类很多，如button、submit、reset，各自有各自的特点。
<!-- type=text键值对,方式提交 --><!-- type=file上传formData这种数据 --><form action=""><input type="text" name="username" /><input type="password" name="password"><input type="file" name="file" onchange="fileChange()" /><button type="submit">提交</button></form>3、
标签用来采集数据
标签的属性则是用来规定如何把采集到的数据发送到服务器。
| 属性 | 值 | 描述 |
|---|---|---|
| accept | MIME_type | HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的） |
| accept-charset | character_set | 规定服务器可处理的表单数据字符集。 |
| action | URL | 规定当提交表单时向何处发送表单数据。 |
| autocomplete（new） | on off | 规定是否启用表单的自动完成功能。 |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain | 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=“post” 的情况） |
| method | get post | 规定用于发送表单数据的 HTTP 方法。 |
| name | text | 规定表单的名称。 |
| novalidate(new) | novalidate | 如果使用该属性，则提交表单时不进行验证。 |
| target | _blank _self _parent _top | 规定在何处打开 action URL。 |
form表单上传数据（POST）
注意：
1、文件类型（word、excel、image/png、mp4）等文件都需要使用 formData格式上传文件至服务器
2、其他的数据内容基本是那个都是按照对象的形式传递的
1、直接传递对应的参数
实例代码基于jquery实现
$(function() {$('button').on('click', function(e) {e.preventDefault();$.ajax({url: 'xxx',type: 'POST',//键值对的方式:data: {username: $('[name="username"]').val(),password: $('[name="password"]').val()},success: (res) => {console.log(res);}})})});2、formData上传数据(文本、文件、视频、图片等)
fileChange(){//选中文件后，会触发input=file的change事件，即会进入此函数// 1.先创建formData数据格式 传递HTML对象(文件上传推荐)var formData = new FormData()[0]);// 2.把传递给服务器数据,追加到formData对象里面// 第一种写法：一个个appendformData.append('username', $('[name="username"]').val())formData.append('password', $('[name="password"]').val());//添加选择的文件 key值为fileformData.append('file',$('[name="file"]')[0].files[0]); // 第二种写法：遍历写法let obj = {username: $('[name="username"]').val(),password: $('[name="password"]').val(),file: $('[name="file"]')[0].files[0]}$.each(obj,function(key,value) {formData.append(key,value)})//删除数据//formData.delete('username');//发送请求$.ajax({url: 'xxx',type: 'POST',data: formData,//如果提交数据格式为formData类型 必须加下面两句,不添加就报错processData: false, //不希望使用 application/x-www-form-urlencodedcontentType: false, //不采用默认的数据类型 //数据格式是 application/x-www-form-urlencodedsuccess: (res) => {console.log(res);},error: function(err) {console.log(err);}})}3、form表单数据序列化(serialize将传递表单中的数据序列化)
//serialize form表单里面具有name属性的标签进行序列化, 序列化字符串console.log($('form').serialize());//输出：username=admin&password=123123//serializeArray form表单里面具有name属性的标签进行序列化, 序列化数组套objectconsole.log($('form').serializeArray());//输出：[ {name: 'username', value: 'admin'}, {name: 'password', value: '123123'},]console.log(serializeObject($('form'));//输出：{username:"admin",password:"123123"}// 将表单中用户输入的内容转换为对象类型// 封装一个方法： serializeObject()——返回对象function serializeObject(obj) {var params = obj.serializeArray();// 使用each方法对params进行操作var result = {};// 循环数组，将数组转为对象类型$.each(params, function(index, value) {result[value.name] = value.value;})return result;}$.ajax({url: 'xxx',type: 'POST',data: JSON.stringify(serializeObject($('form')),success: (res) => {console.log(res);},error: function(err) {console.log(err);}})