Javascript 如何检查表单数据？

我尝试了

console.log

并使用

for in

在其中循环

这里是表单数据

这两种尝试都是如此

---

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

更新的方法：

截至2016年3月，最新版本的Chrome和Firefox现在支持使用

FormData.entries（）

检查FormData

感谢和指出这一点

旧答案：

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

我还发现了一个同样的问题：

一种解决方法是建立一个常规字典，然后将其转换为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.entries（）

方法。我不确定是否支持所有浏览器，但它在Firefox上运行良好

摘自

---

还有

formData.get（）

和

formData.getAll（）

具有更广泛的浏览器支持，但它们只显示值，不显示键。有关更多信息，请参阅链接。

在某些情况下，使用：

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

这不是一个非常聪明的代码，但它可以工作

---

希望有帮助。

这里有一个函数，可以将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);
};

---

您必须了解

FormData:：entries（）

返回

迭代器的实例

以以下表格为例：

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


var it=new FormData（document.getElementById（'form-id'））.entries（）；
var电流={}；
而（！current.done）{
当前=it.next（）；
控制台信息（当前）
}
以下表格：

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，请考虑添加

我希望这能有所帮助。
简短的回答不多
更长的答案
其他人建议记录每个条目，但是
console.log
也可以接受多个参数
console.log（foo，bar）

要接受任意数量的参数，您可以使用
apply
方法，并将其这样调用：
console.log.apply（console，array）


但是有一种新的ES6方法可以使用和迭代器应用参数
console.log（…array）

知道了这一点，以及And array的原型中都有一个指定默认循环的方法，那么您就可以使用
…iterable
展开参数，而无需调用
formData.entries（）
方法（因为这是默认函数）


var fd=new FormData（）
fd.append（'key1'，'value1'）
fd.append（'key2'，'value2'）
fd.append（'key2'，'value3'）
//使用Symbol.iterator指定的…的默认值
//与调用'fd.entries（）相同`
for（让fd的[键，值]）{
log（`${key}:${value}`）
}
//还使用Symbol.iterator指定的…的默认值
console.log（…fd）
//不在所有浏览器中工作（如果更多地使用同一密钥，则使用最后一对）
console.log（Object.fromEntries（fd））
Angular

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

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

不：当我在Angular 5（使用TypeScript 2.4.2）上工作时，我如上所述进行了尝试，除了静态检查错误外，它还可以工作，但是（var pair of formData.entries（））

不工作

var formData=new formData（）；
formData.append（'key1'，'value1'）；
formData.append（'key2'，'value2'）；
formData.forEach（（值，键）=>{
console.log（键+“”+值）
});ES6+解决方案：

要查看表单数据的结构，请执行以下操作：

console.log([...formData])

要查看每个键值对，请执行以下操作：

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

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

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

尝试此功能：

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

已经回答了，但是如果您想要以一种简单的方式从提交的表单中检索值，您可以使用spread操作符并创建一个新的Map iterable来获得一个好的结构


新地图（[…新表单数据（表单）]）
在
angular 6
的
typeScript
中，此代码适用于我

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

简易方法

我在angular 8中使用了这个代码

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

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


将其映射到如下对象：

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

基于@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）





额外：将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

其他参考资料…



这不是firefox唯一的功能吗？你想做fd的
键而不是fd的
键
。我不知道为什么这在技术上是可行的，但它是有效的。文档。所以，没有chrome或firefox插件可以在不向javascript添加任何代码的情况下显示表单数据？好吧，这将是一个好主意，我将在助手方法中包装表单数据，然后传入对象文本。然后保存它，以备以后查看。chrome和firefox的最新版本现在提供了一个迭代器：
myFormData.entries（）
在撰写本文时，无法访问FormData。我现在更新了答案以反映新的API。谢谢你的提醒！我认为还需要注意的是，您可以使用以下命令获取现有表单的数据：
var formData=new formData（formElement）
。如果您使用的是JQuery，那么就可以这样做：
var formData=new formData（$（'#fo
console.log(formData.getAll('name')); // return all values

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

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


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

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

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