1. ホーム
  2. ジャバスクリプト

[解決済み】FormDataをインスペクトする方法は?

2022-03-27 19:17:38

質問

試してみたところ console.log を使ってループさせ for in .

ここで MDNリファレンス をFormDataに追加しました。

どちらの試みも、この フィドル .

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

どのようにしたら、フォームデータを検査して、どのようなキーが設定されているかを確認することができますか。

どのように解決するのですか?

方法を更新しました。

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

ありがとうございます ゴースト・エコー ルロス ご指摘ありがとうございます。

古い回答です。

を見てから これら モジラ 記事 ということは、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);