前言

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

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

1. application/x-www-form-urlencoded

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

2. multipart/form-data

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

3. application/json

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

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

JSON 請求頭：

JSON 負(fù)荷：

formData 請求頭：

formData 負(fù)荷：

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

formdata 的兩種格式

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

json 對象轉(zhuǎn) formData

逐個轉(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 對象轉(zhuǎn) json

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

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

最新評論