一、前端formdata格式传递参数
前端通过表单或ajax请求时,通常使用formdata格式传递参数。利用表单的方式传递参数相对简单,只需要设置表单的enctype属性为"multipart/form-data"即可。ajax请求时,需要创建FormData对象,并使用append()方法添加键值对,示例如下:
let formData = new FormData();
formData.append("username", "admin");
formData.append("password", "123456");
$.ajax({
url: "/login",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(data) {
console.log(data);
}
});
二、formdata格式传参数
formdata格式的参数传递支持多种数据类型,如文本、文件等。对于文本数据,可以直接使用FormData对象的append()方法添加键值对;对于文件数据,则需要通过File对象创建,再使用FormData的append()方法添加。示例如下:
let formData = new FormData();
formData.append("username", "admin");
formData.append("file", file); // file为File对象
$.ajax({
url: "/upload",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(data) {
console.log(data);
}
});
三、formdata格式参数样式
formdata格式的参数传递样式与常规的键值对数据相似,使用键值对的形式添加参数,示例如下:
Content-Disposition: form-data; name="username"
admin
四、formdata数据格式请求
在服务器端接收formdata格式传递参数时,需要使用特殊的解析方式。对于表单的方式传递,可以使用multipart/form-data格式解析;对于ajax请求,需要使用流的方式解析。示例如下:
// 解析multipart/form-data格式
const busboy = new Busboy({ headers: req.headers });
busboy.on("file", (fieldname, file, filename, encoding, mimetype) => {
// file为File对象
});
busboy.on("field", (fieldname, val, fieldnameTruncated, valTruncated, encoding, mimetype) => {
// val为字段值
});
req.pipe(busboy);
// 解析流
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
// fields为键值对数据,files为文件数据
});
五、formdata和json传递的区别
formdata格式和json格式都是一种常用的参数传递方式。formdata格式主要用于传递二进制数据或文件,而json格式则用于传递结构化数据。
在使用ajax请求时,如果需要传递二进制数据或文件,则必须使用formdata格式;如果传递结构化数据,则可以使用json格式。示例如下:
$.ajax({
url: "/login",
type: "POST",
data: { username: "admin", password: "123456" }, // json格式
success: function(data) {
console.log(data);
}
});
$.ajax({
url: "/upload",
type: "POST",
data: formData, // formdata格式
processData: false,
contentType: false,
success: function(data) {
console.log(data);
}
});
六、formdata是什么
FormData是一种对象类型,可以用来获取表单元素的值,创建键值对数据或者二进制数据,然后使用XMLHttpRequest或fetch API将数据提交到服务器端。可以使用append()添加键值对或二进制数据,使用delete()删除键值对数据,使用entries()获取一个用于迭代所有键值对的迭代器,使用get()获取指定键名的键值对数据等等。示例如下:
let formData = new FormData();
formData.append("username", "admin");
formData.append("file", file);
console.log(formData.get("username")); // admin
console.log(formData.getAll("file")); // [File]
console.log(formData.entries()); // 返回一个迭代器
formData.delete("username");
console.log(formData.has("username")); // false