Heim  >  Fragen und Antworten  >  Hauptteil

Schauen Sie sich FormData an: eine Schritt-für-Schritt-Anleitung

Ich habe versucht console.log 并使用 for in es 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粉662361740P粉662361740395 Tage vor624

Antworte allen(2)Ich werde antworten

  • P粉235202573

    P粉2352025732023-10-13 09:14:33

    一些简短的答案

    [...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 方法可以使用 扩展运算符 和迭代器
    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)

    Antwort
    0
  • P粉141911244

    P粉1419112442023-10-13 00:04:34

    更新方法:

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

    Antwort
    0
  • StornierenAntwort