如何检查FormData?


220

我已经尝试过 console.log并使用遍历它for in

这里是FormData上的MDN参考

两种尝试都在摆弄

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);
}

如何检查表单数据以查看设置了哪些键。


这不是仅适用于Firefox的功能吗?
Shiplu Mokaddim 2013年


1
您想key of fd代替做key in fd。我不知道为什么这在技术上还可以,但是可以。文档在这里
cilphex

因此,没有chrome或firefox插件来显示表单数据而不向您的JavaScript添加任何代码?
natel

Answers:


298

更新方法:

截至2016年3月,Chrome和Firefox的最新版本现在支持使用FormData.entries()来检查FormData。来源

// 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 Echorloth指出了这一点!

旧答案:

看完这些 Mozilla 文章之后,似乎无法从FormData对象中获取数据。您只能将它们用于构建要通过AJAX请求发送的FormData。

我也刚刚发现这个问题指出了同样的问题:FormData.append(“ key”,“ value”)不起作用

解决此问题的一种方法是建立一个常规词典,然后将其转换为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);

好吧,那将是一个好主意,我将FormData封装在一个辅助方法中,然后传入对象文字。然后保存它,以备日后查看。

2
chrome和firefox的最新版本现在提供了迭代器:myFormData.entries()
rloth,2016年

1
在撰写本文时,尚无法访问FormData。我现在已经更新了答案以反映新的API。感谢您的警惕!
Ryan Endacott

2
我认为注意到您可以使用来获取现有表单的数据也很有用var formData = new FormData(formElement)。如果您使用的是JQuery,则可以执行以下操作:var formData = new FormData($('#formElementID')[0])。然后根据需要追加数据。
彼得·瓦拉德兹

对于FormDataIE / Edge中的迭代:stackoverflow.com/questions/37938955/…–
cs_pupil

78

简短答案

console.log(...fd)

更长的答案

如果您想检查原始主体的外观,则可以使用Response构造函数(fetch 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)
采取任何数量的参数,你可以使用的apply方法,并调用它是这样:console.log.apply(console, array)
但是,有一种新的ES6方法可以使用带有散布运算符和迭代器的参数
console.log(...array)

知道这一点,并且FormData和两个数组的Symbol.iterator原型中都有一个方法,您可以简单地做到这一点,而不必遍历它,也不必调用.entries()以获取迭代器的所有权。

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

console.log(...fd)


2
传播运营商!出色且非常简单,将表单数据显示为psuedo Json格式。谢谢-为新的响应,我只是得到[PromiseStatus]:“待定”
铂类

5
或从Web控制台只写[...fd]
无尽的

地狱的钟声-您再次尝试了@Endless。用方括号叫什么方法?
铂金

好了,方括号只是一个数组,您正在创建一个新数组。您正在使用...formdata 分散条目,以创建包含所有项目的新数组,然后控制台仅转储您编写的最后一行的结果
Endless

1
最好的答案在这里-应该删除所有的gumpf,只留下第二个代码段-非常感谢
danday74 '18

39

我用的formData.entries()方法。我不确定所有浏览器的支持,但是在Firefox上可以正常使用。

取自https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/entries

// 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]); 
}

还有,formData.get()并且formData.getAll()具有更广泛的浏览器支持,但它们仅显示值而不显示键。有关更多信息,请参见链接。


3
终于可以轻松地了解FormData对象了!升级到Chrome 50(昨天,2016年4月13日发布)后,这对我有用。
jbb 2016年

2
VAR一双抛出的错误我。用in替换它似乎至少可以打印一些内容,但是它不是像MDN状态那样的键或值。
Johnny Welker

1
ES6:for (const pair of formData.entries()) { console.log(pair[0], pair[1]); }
2540625'9

为...的ES6功能,它会工作只在某些浏览器。不包括IE的任何版本根据MDN
Zanshin13

大多数IE不支持for的。仅在IE Edge中受支持
mingca

11

在某些情况下,使用:

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);

这不是一个很聪明的代码,但是它可以工作...

希望对您有所帮助。


1
我会翻转if语句,以便首先检查donedone是权威标志;如果done为false或未指定,value则为有效项目(即使它包含undefined)。当done存在和时true,已经到达序列的末尾,value甚至不必定义。如果value当被定义donetrue,那么value被解释为迭代器的返回值。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
Triynko

10

当我在Angular 5+(使用TypeScript 2.4.2)上工作时,我尝试如下进行操作,除了静态检查错误外,它均有效,但也 for(var pair of formData.entries())无法正常工作。

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

在Stackblitz检查


+与IE 11不兼容(value, key) => {..。头痛 !
Delphine

1
很好 想给你10星。
阿卜杜拉·努鲁姆

10

简单方法

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

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

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

9

ES6 +解决方案:

要查看表单数据的结构:

console.log([...formData])

要查看每个键值对:

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

2

这是一个将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文件 .entries()

MDN文档.next()以及.done


2
  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) {


            },

       });
}

+与IE 11不兼容for...of..。头痛 !
Delphine

2

您必须了解会FormData::entries()返回的实例Iterator

采取以下示例形式:

<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>

和这个JS循环:

<script>
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
</script>

2

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

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

2

已经回答了,但是如果您想以一种简单的方式从提交的表单中检索值,则可以将价差运算符与创建一个可迭代的新Map结合使用,以获得一个不错的结构。

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


虽然-inp_nam [some_mult] []存在问题-仅能看到最后一个
半点三点四十七分

2

typeScriptangular 6,此代码对我有用。

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

或所有值:

console.log(formData.getAll('name')); // return all values

1

试试这个功能:

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

2
尽管此代码段可能是解决方案,但包括说明确实有助于提高帖子的质量。请记住,您将来会为读者回答这个问题,而这些人可能不知道您提出代码建议的原因。
约翰

0

MDN建议如下形式:

let formData = new FormData();
formData.append('name', 'Alex Johnson')
for(let keyValuePair of formData.entries()){
    console.log(keyValuePair); //has form ['name','Alex Johnson']
}

或者

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

如果浏览器或环境不支持最新的JavaScript和FormData API,请考虑添加ES + Polyfills

我希望这有帮助。


您是否在运行此代码之前对其进行了测试?formData()首先应大写。另外,for ... of loop第3行中隐式调用FormData.entries,您可以通过new FormData()[Symbol.iterator]在控制台中运行来查看此内容。最后,如果在不支持FormData.entries的Edge之类的浏览器中运行此程序,则会得到意外的结果,例如打印FormData对象上可用的方法名称:>>> var data = new FormData(); data.append("Foo", "Bar"); for(let x in data){console.log(x)}; <<< 'append'
Lovethenakedgun
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.