追加后表单数据显示为空

Posted 2023-05-09

【中文标题】追加后表单数据显示为空

【英文标题】：form data is showing empty after append

【发布时间】：2021-08-22 19:46:57

【问题描述】：

$('#submit2').click(e => 
  e.preventDefault();
  var form_data = new FormData();
  form_data.append('newKey1', 'newValue1');
  form_data.append('newKey2', 'newValue2');
  console.log("data after appended", form_data.get('newKey1'))
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="submit2">See form data in Console</button>

我想在表单数据中添加文件，但我无法追加，所以我尝试添加键和值，但无法在表单数据中追加。

【问题讨论】：

它似乎工作正常。日志消息是“附加 newValue1 后的数据”

我已经更新了您的代码 sn-p，因此您可以看到您的 FormData 设置了值。你不能 console.log 你的 FormData 实例并期望打印整个对象。

【参考方案1】：

你的FormData 很好，你只是不能console.log 它并期望看到内容。

这就是您通常使用FormData 的方式：

document.addEventListener('submit', function (event) 

    event.preventDefault();

    fetch('https://jsonplaceholder.typicode.com/posts', 
        method: 'POST',
        body: new FormData(event.target),
    ).then(function (response) 
        if (response.ok) 
            return response.json();
        
        return Promise.reject(response);
    ).then(function (data) 
        console.log(data);
    ).catch(function (error) 
        console.warn(error);
    );
);

如果你想记录对象，你需要做这样的事情：

var serializeForm = function (form) 
    var obj = ;
    var formData = new FormData(form);
    for (var key of formData.keys()) 
        obj[key] = formData.get(key);
    
    return obj;
;

serializeForm(formData)

来源：

Developer Mozilla - Web API FormData Serializing form data with the vanilla JS FormData() object