在傳遞參數(shù)時(shí)，form-data 和 JSON 是兩種常見的數(shù)據(jù)格式。

• form-data 是一種多部分表單數(shù)據(jù)格式，通常用于上傳文件或包含二進(jìn)制數(shù)據(jù)的表單提交。它使用 multipart/form-data 格式來編碼數(shù)據(jù)。在使用 form-data 格式時(shí)，數(shù)據(jù)會(huì)被分割成多個(gè)部分，每個(gè)部分都有自己的頭部信息。

• JSON（JavaScript Object Notation）是一種輕量級(jí)的數(shù)據(jù)交換格式，常用于前后端數(shù)據(jù)傳輸。它使用鍵值對(duì)的形式來表示數(shù)據(jù)，并且支持嵌套結(jié)構(gòu)。JSON 數(shù)據(jù)格式是純文本的，易于閱讀和編寫，同時(shí)也易于解析和生成。

生成 form-data 格式的數(shù)據(jù)通常需要使用 FormData 對(duì)象來處理，示例代碼如下：

const formData = new FormData();
formData.append('username', 'John');
formData.append('avatar', file); // 上傳文件

// 發(fā)送請(qǐng)求
axios.post('/api/endpoint', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

生成 JSON 格式的數(shù)據(jù)可以通過創(chuàng)建一個(gè)包含鍵值對(duì)的 JavaScript 對(duì)象，并使用 JSON.stringify 方法將其轉(zhuǎn)換為字符串，示例代碼如下：

const data = {
  username: 'John',
  age: 25
};

// 發(fā)送請(qǐng)求
axios.post('/api/endpoint', JSON.stringify(data), {
  headers: {
    'Content-Type': 'application/json'
  }
});

在示例中，axios 是一個(gè)常用的 HTTP 請(qǐng)求庫，用于發(fā)送請(qǐng)求。headers 部分用于設(shè)置請(qǐng)求頭，確保服務(wù)器能夠正確解析請(qǐng)求數(shù)據(jù)的格式。

需要根據(jù)具體的需求和后端接口的要求選擇使用 form-data 還是 JSON 格式的數(shù)據(jù)傳遞。

附：form-data 轉(zhuǎn)json

form-data轉(zhuǎn)json的方法可以使用JavaScript中的FormData對(duì)象和serializeArray()方法來實(shí)現(xiàn)。首先，我們可以使用FormData對(duì)象來獲取表單中的所有數(shù)據(jù)，然后使用serializeArray()方法將FormData對(duì)象轉(zhuǎn)換為一個(gè)包含鍵值對(duì)的數(shù)組。接下來，我們可以遍歷這個(gè)數(shù)組，將每個(gè)鍵值對(duì)轉(zhuǎn)換為一個(gè)JSON對(duì)象。在轉(zhuǎn)換過程中，我們可以根據(jù)需要對(duì)值進(jìn)行自定義處理，比如將空值轉(zhuǎn)換為null。最后，將所有的JSON對(duì)象組合成一個(gè)對(duì)象數(shù)組并返回。

以下是一個(gè)示例代碼，用于將form-data轉(zhuǎn)換為JSON對(duì)象數(shù)組：

function transformToJson(form) {
  var jsonData = {};
  var formData = new FormData(form);
  var formArray = $(form).serializeArray();

  $.each(formArray, function() {
    var dataType = $("select\[name='" + this.name + "'\]").attr("data-type");
    var value = this.value;

    if (value == "無" || value == "") {
      value = null;
    }

    if (jsonData\[this.name\]) {
      if (!jsonData\[this.name\].push) {
        jsonData\[this.name\] = \[jsonData\[this.name\]\];
      }
      jsonData\[this.name\].push(value || '');
    } else {
      if (dataType == 'array') {
        jsonData\[this.name\] = \[\];
        jsonData\[this.name\].push(value || '');
      } else {
        jsonData\[this.name\] = value || '';
      }
    }
  });

  return jsonData;
}

這個(gè)函數(shù)接受一個(gè)表單作為參數(shù)，并返回一個(gè)轉(zhuǎn)換后的JSON對(duì)象數(shù)組。你可以將表單元素傳遞給這個(gè)函數(shù)，然后使用返回的JSON對(duì)象數(shù)組進(jìn)行后續(xù)操作。

總結(jié)

到此這篇關(guān)于前端傳遞參數(shù)時(shí)form-data和json區(qū)別的文章就介紹到這了,更多相關(guān)前端傳遞參數(shù)form-data和json區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論