前言

大家都知道，前端在和后臺(tái)進(jìn)行交互聯(lián)調(diào)時(shí)，肯定避免不了要傳遞參數(shù)，一般情況下，params 在 get 請(qǐng)求中使用，而 post 請(qǐng)求下，我們有兩種常見的傳參方式： JSON 對(duì)象格式和 formData 格式，但是一些場(chǎng)景是需要我們對(duì)這兩種數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換的，例如表單提交，有些是 JSON 對(duì)象格式的數(shù)據(jù)，有些是 FormData 格式的數(shù)據(jù)，這個(gè)時(shí)候就需要我們對(duì)其進(jìn)行轉(zhuǎn)換。

常見的 POST 提交數(shù)據(jù)方式

1. application/x-www-form-urlencoded

表單格式提交數(shù)據(jù)，通過 form 標(biāo)簽的 action 屬性，如果不設(shè)置 enctype 屬性，那么最終就會(huì)以 application/x-www-form-urlencoded 方式提交數(shù)據(jù)。

2. multipart/form-data

這也是一個(gè)常見的 post 數(shù)據(jù)提交的方式，我們使用表單上傳文件時(shí)，就要讓 form 的 enctype 等于這個(gè)值，多用于文件上傳。

3. application/json

application/json 這個(gè) Content-Type 作為響應(yīng)頭大家肯定不陌生，客觀來說，現(xiàn)在越來越多的人把它作為請(qǐng)求頭，用來告訴服務(wù)端消息主體是序列化后的 json 字符串。由于 json 規(guī)范的流行，除了低版本 IE 之外的各大瀏覽器都原生支持 JSON.stringify，服務(wù)端語言也都有處理 json 的函數(shù)，使用 json 不會(huì)遇上什么麻煩，并且 json 格式支持比鍵值對(duì)復(fù)雜的多的結(jié)構(gòu)化數(shù)據(jù)。

4. text/xml

相比于 json，xml 不能更好的適用于數(shù)據(jù)交換，它包含了太多的包裝，而且它跟大多數(shù)編程語言的數(shù)據(jù)模型不匹配，xml 是面向數(shù)據(jù)的，json 是面向?qū)ο蠛徒Y(jié)構(gòu)的。目前多用于 XML 存儲(chǔ)數(shù)據(jù)，存儲(chǔ)配置文件等需要結(jié)構(gòu)化存儲(chǔ)的地方使用。

JSON 格式和 formData 格式的區(qū)別

JSON 請(qǐng)求頭：

JSON 負(fù)荷：

formData 請(qǐng)求頭：

formData 負(fù)荷：

通過上面的幾張圖我們就能大概明白了，前端傳的都是二進(jìn)制數(shù)據(jù)，兩者的 content-type 是不同的，json 我們已經(jīng)序列化好了，而 formdata 還是需要進(jìn)行處理。

formdata 的兩種格式

• multipart/form-data：既可以上傳文件等二進(jìn)制數(shù)據(jù)，也可以上傳表單鍵值對(duì)，只是最后會(huì)轉(zhuǎn)化為一條信息；
• x-www-form-urlencoded：只能上傳鍵值對(duì)，并且鍵值對(duì)都是間隔分開的。

json 對(duì)象轉(zhuǎn) formData

逐個(gè)轉(zhuǎn)換

let obj = {
  id: "001",
  name: "小藍(lán)",
  age: "18",
  sex: "女",
};
const formData = new FormData();
formData.append("id", obj.id);
formData.append("name", obj.name);
formData.append("age", obj.age);
formData.append("sex", obj.sex);
console.log(formData);

所有屬性值轉(zhuǎn)換

let obj = {
  id: "001",
  name: "小藍(lán)",
  age: "18",
  sex: "女",
};
const formData = new FormData();
Object.keys(obj).map((key) => {
  formData.append(key, obj[key]);
});
console.log(formData);

formData 對(duì)象轉(zhuǎn) json

var jsonObj = {};
formData.forEach((value, key) => (jsonObj[key] = value));

到此這篇關(guān)于json對(duì)象和formData相互轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)json對(duì)象和formData相互轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論