国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > formdata格式傳遞參數詳解

formdata格式傳遞參數詳解

來源:千鋒教育
發布人:xqq
時間: 2023-11-24 18:14:08 1700820848

一、前端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

聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT