前言
提示：form表单上传数据,可以使用POST 请求发送数据…服务器!!!
此处要考虑上传文件的类型
1.文件类型（word、excel、image/png、mp4）等文件都需要使用 formData格式上传文件至服务器
2.其他的数据内容基本是那个都是按照对象的形式传递的，使用那种都可以
``
一、HTML结构(下方所有上传方式，都依托这个结构)
<body>
<!-- type-text 键值对,方式提交 -->
<!-- type=file 上传formData这种数据 -->
<form action="">
value1: <input type="text" id="value1" name="v1"><br> value2: <input type="text" id="value2" name="v2">
<br>
<button>提交</button>
</form>
</body>
二、通过post请求的形式（直接传递对应的参数数据）
代码如下(基于jquery实现的):
//第一个版本
$(function() {
$('button').on('click', function(e) {
e.preventDefault();
//第一种方法:
$.ajax({
url: 'http://192.168.205.93:3000/add',
type: 'POST',
//键值对的方式提示:
data: {
val1: $('#value1').val(),
val2: $('#value2').val()
},
success: (res) => {
console.log(res);
}
})
})
});
三、formData上传数据(文本、文件、视频、图片等)
代码如下（示例）：
//第二种方法
$(function() {
$('button').on('click', function(e) {
e.preventDefault();
// 1.先创建formData数据格式 传递HTML对象(文件上传推荐)
var formData = new FormData($('form')[0]);
// 2.把传递给服务器数据,追加到formData对象里面
formData.append('val1', $('#value1').val())
formData.append('val2', $('#value2').val());
//删除数据
// formData.delete('val1');
//formData数据上传针对input=file ,在上传文件的时候采用
//formData数据格式,大部分浏览器都支持formdata数据类型
//使用serilayArray()只能传递普通参数
//发送请求
$.ajax({
url: 'http://192.168.205.98:3000/addFormData',
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);
}
})
})
})
四、form表单数据序列化(serialize将传递表单中的数据序列化)
代码如下（示例）：
$(function() {
//serialize form表单里面具有name属性的标签进行序列化, 序列化字符串
console.log($('form').serialize());
//serializeArray form表单里面具有name属性的标签进行序列化, 序列化数组套object
console.log($('form').serializeArray());
$('button').on('click', function(e) {
e.preventDefault();
$.ajax({
url: 'http://192.168.205.85:3000/addserialize',
type: 'POST',
data: $('form').serializeArray(),
success: (res) => {
console.log(res);
}
})
})
})
form的action直接上传数据（不推荐）
1.会造成页面出现跳转，不太适用于现在开发场景，可以了解一下
总结
提示：后续在遇到其他比较有趣的demo也会跟大家分享出来!!! (希望文章可以帮助到大家)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
