在IE中遍历FormData

Question

在IE中遍历FormData

15

我正在使用FormData将信息发送回服务器。然而，在某些情况下，我需要在发送数据之前读取数据。

Chrome允许您遍历集合，但IE不提供相同的方法。

以下代码适用于Chrome：

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

JS Fiddle

有人知道如何在IE中获得相同的结果吗？谢谢。

- KoenW

使用 for...in... 替代 for...of...（浏览器兼容性）。 - Andreas

2

问题与 FormData 对象上的方法有关，而不是使用 for...of/in...。IE 缺少 formData.keys() / entries() 等方法... - KoenW

这个“entries”是规范的一部分吗？还是IE中的一个方法？ - SuperUberDuper

2

@SuperUberDuper 这是规范的一部分。https://xhr.spec.whatwg.org/#dom-formdata - user719662

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- acdcjunior · Accepted Answer

有一个FormData polyfill可以使用。详情请参阅它们的文档。

IE 10、IE 11和Edge

为了使其与IE 10及以上版本兼容，您需要添加一个WeakMap polyfill。

JSBin演示对于IE10及以上版本。

<script src="https://unpkg.com/weakmap-polyfill/weakmap-polyfill.min.js"></script>
<script src="https://unpkg.com/formdata-polyfill"></script>

<form action="" id="f">
    <input type="text" name="i1" value="v1">
    <input type="text" name="i2" value="v2">
</form>

<script type="text/javascript">
    console.clear();

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

    // Display the key/value pairs
    var formDataEntries = formData.entries(), formDataEntry = formDataEntries.next(), pair;
    while (!formDataEntry.done) {
        pair = formDataEntry.value;
        console.log(pair[0] + ', ' + pair[1]);
        formDataEntry = formDataEntries.next();
    }

    // or, if you are really into compact code
    var es, e, pair;
    for (es = formData.entries(); !(e = es.next()).done && (pair = e.value);) {
        console.log(pair[0] + ', ' + pair[1]);
    }

    // testing getting from form
    var myForm = document.getElementById('f');
    for (es = new FormData(myForm).entries(); !(e = es.next()).done && (pair = e.value);) {
        console.log(pair[0] + ', ' + pair[1]);
    }
</script>

_{上面的代码获取最新版本。测试的版本为：https://unpkg.com/weakmap-polyfill@2.0.0/weakmap-polyfill.min.js 和 https://unpkg.com/formdata-polyfill@3.0.9/formdata.min.js}

仅适用于IE11和Edge（如果不需要支持IE10）：

如果只需要支持IE 11及以上版本，则可以删除WeakMap的polyfill，并保留FormData。

JSBin演示点此处。

<script src="https://unpkg.com/formdata-polyfill"></script>

<form action="" id="f">
    <input type="text" name="i1" value="v1">
    <input type="text" name="i2" value="v2">
</form>

<script type="text/javascript">
    console.clear();

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

    // Display the key/value pairs
    var formDataEntries = formData.entries(), formDataEntry = formDataEntries.next(), pair;
    while (!formDataEntry.done) {
        pair = formDataEntry.value;
        console.log(pair[0] + ', ' + pair[1]);
        formDataEntry = formDataEntries.next();
    }

    // or, if you are really into compact code
    var es, e, pair;
    for (es = formData.entries(); !(e = es.next()).done && (pair = e.value);) {
        console.log(pair[0] + ', ' + pair[1]);
    }

    // testing getting from form element
    const myForm = document.getElementById('f');
    for (es = new FormData(myForm).entries(); !(e = es.next()).done && (pair = e.value);) {
        console.log(pair[0] + ', ' + pair[1]);
    }
</script>

_{以上代码选取了最新版本。测试版本为：https://unpkg.com/formdata-polyfill@3.0.9/formdata.min.js}