Schauen Sie sich FormData an: eine Schritt-für-Schritt-Anleitung
P粉662361740
P粉662361740 2023-10-12 09:40:15
0
2
515

Ich habe versuchtconsole.log并使用for ines in einer Schleife zu machen.

Hier ist die MDN-Referenz für FormData.

Zwei Versuche in dieser Geige.

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

So überprüfen Sie Formulardaten, um zu sehen, welche Schlüssel festgelegt wurden.

P粉662361740
P粉662361740

Antworte allen (2)
P粉235202573

一些简短的答案

[...fd] // shortest devtool solution Array.from(fd) // Same as above console.log(...fd) // shortest script solution console.log([...fd]) // Think 2D array makes it more readable console.table([...fd]) // could use console.table if you like that console.log(Object.fromEntries(fd)) // Works if all fields are uniq console.table(Object.fromEntries(fd)) // another representation in table form new Response(fd).text().then(console.log) // To see the entire raw body

更长的答案

其他人建议记录 fd.entries() 的每个条目,但console.log也可以采用多个参数
console.log(foo , bar, ...)
要接受任意数量的参数,您可以使用apply方法并按如下方式调用它:console.log.apply(console,数组)
但是有一种新的 ES6 方法可以使用扩展运算符 a> 和迭代器
console.log(...array)

知道这一点,并且事实上FormData和数组的两者都有一个Symbol.iterator方法在其原型中指定默认的for。 ..of循环,那么您可以使用...iterable展开参数,而不必去调用formData.entries()方法(因为这是默认函数)如果您愿意,您可以执行for (x of formData)

var fd = new FormData() fd.append('key1', 'value1') fd.append('key2', 'value2') fd.append('key2', 'value3') // using it's default for...of specified by Symbol.iterator // Same as calling `fd.entries()` for (let [key, value] of fd) { console.log(`${key}: ${value}`) } // also using it's default for...of specified by Symbol.iterator console.log(...fd) // Only shows up in devtool (not here in this code snippet) console.table([...fd]) // Don't work in IE (use last pair if same key is used more) console.log(Object.fromEntries(fd))

如果您想检查原始主体的外观,那么您可以使用响应构造函数(获取 API 的一部分),这会将您的表单数据转换为上传表单数据时实际的样子

var fd = new FormData() fd.append('key1', 'value1') fd.append('key2', 'value2') new Response(fd).text().then(console.log)
    P粉141911244

    更新方法:

    截至 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 对象中获取数据。您只能使用它们来构建 FormData 以通过 AJAX 请求发送。

    我还刚刚发现这个问题说明了同样的事情:FormData.append("键”、“值”)不起作用

    解决这个问题的一种方法是构建一个常规字典,然后将其转换为 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);
      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!