简短回答

Question

我已尝试console.log并使用for in循环播放它。

这是FormData上的MDN Reference。

这两次尝试都在fiddle。

var fd = new FormData(),
    key;

// poulate with dummy data

fd.append("key1", "alskdjflasj");
fd.append("key2", "alskdjflasj");

// does not do anything useful

console.log(fd);

// does not do anything useful

for(key in fd) {
    console.log(key);
}

如何检查表单数据以查看已设置的键。

Answer 1

更新方法：

截至2016年3月，最近版本的Chrome和Firefox现在支持使用FormData.entries()检查FormData。 Source

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

感谢Ghost Echo和rloth指出这一点！

旧答案：

查看these Mozilla articles后，看起来无法从FormData对象中获取数据。您只能使用它们来构建FormData以通过AJAX请求发送。

我也刚刚发现这个问题说明了同样的事情：FormData.append("key", "value") is not working。

解决这个问题的一种方法是建立一个常规字典，然后将其转换为FormData：

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    console.log(key, myFormData[key]);
    fd.append(key, myFormData[key]);
}

如果要调试普通的FormData对象，也可以发送它以便在网络请求控制台中检查它：

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);

Answer 2

我使用// Create a test FormData object var formData = new FormData(); formData.append('key1','value1'); formData.append('key2','value2'); // Display the key/value pairs for (var pair of formData.entries()) { console.log(pair[0]+ ', '+ pair[1]); }方法。我不确定所有的浏览器支持，但它在Firefox上运行良好。

取自https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries

formData.get()

还有formData.getAll()和\r\n更广泛的浏览器支持，但它们只显示值而不是键。有关详细信息，请参阅链接。

Answer 3

简短回答

console.log(...fd)

更长的答案

如果您想检查原始身体的样子，那么您可以使用Response constructor（获取API的一部分）

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

new Response(fd).text().then(console.log)

有些愿望建议记录条目的每个条目，但console.log也可以采用多个参数
console.log(foo, bar)
。要获取任意数量的参数，您可以使用{{ 1}}方法并将其称为：apply。
但是有一种新的ES6方法可以使用spread operator和迭代器
console.log.apply(console, array)来应用参数。

知道了这一点，并且FormData和两个数组在它的原型中都有一个console.log(...array)方法的事实你可以简单地做到这一点而不必循环它，或者调用Symbol.iterator来获得保持迭代器

.entries()

Answer 4

在某些情况下，使用：

for(var pair of formData.entries(){...

是不可能的。

我已将此代码替换为：

var outputLog = {}, iterator = myFormData.entries(), end = false;
while(end == false) {
   var item = iterator.next();
   if(item.value!=undefined) {
       outputLog[item.value[0]] = item.value[1];
   } else if(item.done==true) {
       end = true;
   }
    }
console.log(outputLog);

这不是一个非常聪明的代码，但它有效...

希望它有所帮助。

Answer 5

ES6 +解决方案：

要查看表单数据的结构：

console.log([...formData])

要查看每个键值对：

for (let [key, value] of formData.entries()) {
  console.log(key, ':', value);
}

Answer 6

当我正在使用Angular 5+（使用TypeScript 2.4.2）时，我尝试了如下操作，除了静态检查错误之外它还可以工作，但for(var pair of formData.entries())也不起作用。

formData.forEach((value,key) => {
      console.log(key+" "+value)
});

＆＃13;

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

formData.forEach((value,key) => {
  console.log(key+" "+value)
});

＆＃13;

<强> Check at Stackblitz

Answer 7

简便方法

我在角度7中使用了此代码

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

 formData.forEach((value,key) => {
    console.log(key+value)
     });

Answer 8

您必须了解MIGRATINGDATA=true bundle exec rake project:migrate_data会返回FormData::entries()的实例。

以此示例形式：

Iterator

和这个JS循环：

<form name="test" id="form-id">
    <label for="name">Name</label>
    <input name="name" id="name" type="text">
    <label for="pass">Password</label>
    <input name="pass" id="pass" type="text">
</form>

Answer 9

  function abc(){ 
    var form = $('#form_name')[0]; 
        var formData = new FormData(form);
        for (var [key, value] of formData.entries()) { 
            console.log(key, value);
        }
        $.ajax({
            type: "POST",
            url: " ",
            data:  formData,
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function() {

            },
            success: function(data) {


            },

       });
}

Answer 10

这是一个将FormData对象的条目作为对象记录到控制台的函数。

export const logFormData = (formData) => {
    const entries = formData.entries();
    const result = {};
    let next;
    let pair;
    while ((next = entries.next()) && next.done === false) {
        pair = next.value;
        result[pair[0]] = pair[1];
    }
    console.log(result);
};

MDN doc on .entries()

Answer 11

在angular 7中，我使用下面的代码行在控制台上输入了条目。

formData.forEach(entries => console.log(entries));

Answer 12

尝试此功能：

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

Answer 13

已经回答了，但是如果您想从提交的表单中轻松检索值，则可以使用点差运算符结合创建可迭代的新Map以获得漂亮的结构。

new Map([...new FormData(form)])

Answer 14

试试这个::

let formdata = new formData()
formdata.append('name', 'Alex Johnson')
for(let i of formdata){
    console.log(i)
}

Answer 15

在typeScript的{{1}}中，此代码对我有用。

angular 6

或所有值：

var formData = new FormData();
formData.append('name', 'value1');
formData.append('name', 'value2');
console.log(formData.get('name')); // this is return first element value.

Answer 16

将其映射到这样的对象：

let debug_form_data = {}
form_data.forEach((value,key)=> debug_form_data[key]=value)
console.debug(debug_form_data)

Answer 17

基于@2540625 的回答，ECMAScript 5 兼容版本...

// NOTE: Inspect a HTML request data ("FormData"). By Questor
function inspRqstData(rqstData) {
    var dataEntries = rqstData.entries();
    var rqstDataAsJO = {};
    var dataNext;
    var dataPair;
    while ((dataNext = dataEntries.next() || true) && dataNext.done === false) {
        dataPair = dataNext.value;
        console.log(dataPair[0], dataPair[1]);
    }
}

var rqstData = new FormData();
rqstData.append('key1', 'value1');
rqstData.append('key2', 'value2');
inspRqstData(rqstData);

注意：“FormData”可能是包含“ECMAScript 5”JavaScript 支持的内容。这可以通过在这些参考文献中交叉有关浏览器支持/兼容性的信息来推断（参见 IE10）...

https://www.w3schools.com/js/js_es5.asp
https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData#browser_compatibility

额外：将 HTML 请求数据（“FormData”）转换为简单的 JavaScript 对象...

// NOTE: Convert a HTML request data ("FormData") to a JavaScript Object. By Questor
function rqstDataToJO(rqstData) {
    var dataEntries = rqstData.entries();
    var rqstDataAsJO = {};
    var dataNext;
    var dataPair;
    while ((dataNext = dataEntries.next() || true) && dataNext.done === false) {
        dataPair = dataNext.value;
        rqstDataAsJO[dataPair[0]] = dataPair[1];
    }
    return rqstDataAsJO;
}

var rqstData = new FormData();
rqstData.append("key1", "value1");
rqstData.append("key2", "value2");
var rqstDataAsJO = rqstDataToJO(rqstData);
console.log(rqstDataAsJO.key1)
console.log(rqstDataAsJO.key1)

谢谢！ =D

其他参考资料...

https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

Answer 18

你可以使用 Array.from()

console.log(Array.from(formData.entries()))

如何检查FormData？

19 个答案:

简短回答

更长的答案