前端傳遞參數時form-data和json的區(qū)別詳解

更新時間：2023年11月07日 08:27:03 作者：一嘴一個橘子

前端可以通FormData對象實現表單形式提交數據,下面這篇文章主要給大家介紹了關于前端傳遞參數時form-data和json區(qū)別的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

在傳遞參數時，form-data 和 JSON 是兩種常見的數據格式。

form-data 是一種多部分表單數據格式，通常用于上傳文件或包含二進制數據的表單提交。它使用 multipart/form-data 格式來編碼數據。在使用 form-data 格式時，數據會被分割成多個部分，每個部分都有自己的頭部信息。
JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，常用于前后端數據傳輸。它使用鍵值對的形式來表示數據，并且支持嵌套結構。JSON 數據格式是純文本的，易于閱讀和編寫，同時也易于解析和生成。

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

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

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

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

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

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

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

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

附：form-data 轉json

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

以下是一個示例代碼，用于將form-data轉換為JSON對象數組：

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;
}

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

總結

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

您可能感興趣的文章: