FormData オブジェクト内のキーと値を効率的に検査するにはどうすればよいですか?

FormData のイントロスペクト: キーの探索

FormData オブジェクトの内容を理解することは、フォーム送信のデバッグと検査に不可欠です。ただし、console.log およびループベースのアプローチでは、望ましい結果が得られない場合があります。

FormData.entries()

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.entries() の導入前は、次のことはできませんでした。 FormData オブジェクトからデータを直接取得するには、代替メソッドが必要でした。オプションの 1 つは、通常の辞書を 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]);
}

デバッグの場合、XMLHttpRequest 経由で FormData オブジェクトを送信することで、ネットワーク リクエスト コンソールでの検査も可能になります:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);

以上がFormData オブジェクト内のキーと値を効率的に検査するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。