如何將FormData（HTML5對象）轉換爲JSON

如何將HTML5 FormData對象轉換爲JSON？沒有Jquery，並像處理對象一樣處理FormData中的嵌套屬性。如何將FormData（HTML5對象）轉換爲JSON

2017-01-02 Leonardo Villela

你到底想幹什麼？ 'JSON.stringify（）'有幫助嗎？也許你試圖解決可能以其他方式完成的事情？ – Justinas

[將JS對象轉換爲JSON字符串]（http：// stackoverflow。com/questions/4162749/convert-js-object-to-json-string） – Liam

因爲我不想將JavaScript對象轉換爲json，所以也不重複，也不想使用Jquery.serialize（） –

你也可以直接在FormData對象使用forEach：

var object = {}; 
formData.forEach(function(value, key){ 
    object[key] = value; 
}); 
var json = JSON.stringify(object);

來源

2017-10-16 15:40:59 Wilt

嚴重的是，這是最好的實現。爲什麼這不是被接受的答案？ – ARun32

正如@TomasPrado的回答中所提到的，確保你不需要IE11的支持。 – Wilt

您可以通過使用FormData()對象來實現此目的。此FormData對象將使用表單的當前鍵/值使用鍵的每個元素的name屬性及其提交的值來填充該FormData對象。它也將編碼文件輸入內容。

例子：

var myForm = document.getElementById('myForm'); 
myForm.addEventListener('submit', function(event) 
{ 
    event.preventDefault(); 
    var formData = new FormData(myForm), 
     result = {}; 

    for (var entry of formData.entries()) 
    { 
     result[entry[0]] = entry[1]; 
    } 
    result = JSON.stringify(result) 
    console.log(result); 

});

來源

2017-01-03 08:52:11 GiriB

這樣做不生產json – Liam

@Liam你有沒有嘗試過與表單元素？並讓我知道爲什麼它不會產生JSON對象？ – GiriB

沒有像json對象那樣的東西。 Json是一個字符串符號 – Liam

易於使用的功能

我創建A Function For This

function FormDataToJSON(FormElement){  
    var formData = new FormData(FormElement); 
    var ConvertedJSON= {}; 
    for (const [key, value] of formData.entries()) 
    { 
     ConvertedJSON[key] = value; 
    } 

    return ConvertedJSON 
}

使用示例

var ReceivedJSON = FormDataToJSON(document.getElementById('FormId');)

在此代碼中，我使用for循環創建了空的JSON變量。我在每個Itration中都使用了從formData對象到JSON密鑰的key。

你覺得這個代碼在我的JS庫在GitHub上確實暗示我，如果需要改進我已經把代碼這裏https://github.com/alijamal14/Utilities/blob/master/Utilities.js

來源

2017-05-24 07:13:11

請解釋你的代碼。 – zuluk

@zuluk [Explained]（https://stackoverflow.com/revisions/44151416/2）**謝謝** –

FORMDATA方法.entries和for of表達沒有在IE11和Safari支持。

這裏是一個simplier版支持Safari瀏覽器，Chrome瀏覽器，Firefox和邊緣

function formDataToJSON(formElement) {  
    var formData = new FormData(formElement), 
     convertedJSON = {}; 

    formData.forEach(function(value, key) { 
     convertedJSON[key] = value; 
    }); 

    return convertedJSON; 
}

警告：這個答案不IE11工作。
FormData在IE11中沒有forEach方法。
我仍在尋找支持所有主流瀏覽器的最終解決方案。

來源

2017-09-08 11:45:04

這是完美的！我們必須支持舊版瀏覽器，並且迭代器的使用不太直觀。 –

如果您正在使用lodash可以與fromPairs

import {fromPairs} from 'lodash'; 

const object = fromPairs(Array.from(formData.entries()));

來源

2018-01-03 13:26:00

這裏簡要地做一個辦法做到這一點更功能風格，而不需要使用庫。

Array.from(formData.entries()).reduce((memo, pair) => ({ 
    ...memo, 
    [pair[0]]: pair[1], 
}), {});

例子：

document.getElementById('foobar').addEventListener('submit', (e) => { 
 
    e.preventDefault(); 
 

 
    const formData = new FormData(e.target); 
 
    const data = Array.from(formData.entries()).reduce((memo, pair) => ({ 
 
    ...memo, 
 
    [pair[0]]: pair[1], 
 
    }), {}); 
 
    document.getElementById('output').innerHTML = JSON.stringify(data); 
 
});

<form id='foobar'> 
 
    <input name='baz' /> 
 
    <input type='submit' /> 
 
</form> 
 

 
<pre id='output'>Input some value and submit</pre>

來源

2018-02-20 19:36:19 dzuc

如何將FormData（HTML5對象）轉換爲JSON

回答

相關問題