form 的基本使用
1、什么是表单
表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并通过标签的提交操作，把用户收集到的信息发送到 Web 服务器进行处理。
2、表单的组成部分
- 表单标签
就是我们常说的form表单，就是所谓的表单标签。
- 表单域
也就是表单标签之间的部分，这里面包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等.各种用于采集用户信息的标签。
这里面还可以包含一个特殊的部分，隐藏域：
隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式：<input type="hidden" name="..." value="...">
- 表单按钮
既然采集完用户对应输入的信息了，我还还需要将其提交到服务器，这时就需要借助提交按钮了。按钮的种类很多，如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、<form>标签的属性
<form>标签用来采集数据
<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。
| 属性 | 值 | 描述 |
|---|---|---|
| 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、其他的数据内容基本是那个都是按照对象的形式传递的文章来源：https://www.toymoban.com/news/detail-475815.html
1、直接传递对应的参数
实例代码基于jquery实现文章来源地址https://www.toymoban.com/news/detail-475815.html
$(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对象里面
// 第一种写法：一个个append
formData.append('username', $('[name="username"]').val())
formData.append('password', $('[name="password"]').val());
//添加选择的文件 key值为file
formData.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-urlencoded
contentType: false, //不采用默认的数据类型
//数据格式是 application/x-www-form-urlencoded
success: (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属性的标签进行序列化, 序列化数组套object
console.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);
}
})
到了这里，关于form表单上传数据的几种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
