JavaScript で FormData オブジェクトを効果的に検査およびデバッグするにはどうすればよいですか?

FormData の検査: 総合ガイド

console.log や for-in ループなどのメソッドでは課題に直面していますが、FormData を検査するには効果的なアプローチがいくつかあります。

最近のバージョンの FormData

幸いなことに、Chrome と Firefox の最新バージョンFormData を検査するための FormData.entries() をサポートするようになりました。使用方法は次のとおりです:

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

古いブラウザの代替手段

古いブラウザの場合、2 つのオプションがあります:

1.通常の辞書の構築:

通常の辞書を作成して、それを FormData に変換できます:

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    fd.append(key, myFormData[key]);
}

2.ネットワーク リクエストの検査:

FormData オブジェクトをデバッグするには、ネットワーク リクエストでオブジェクトを送信し、ブラウザのリクエスト コンソールを使用して検査できます:

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

FormData の制限事項

FormData は、AJAX リクエストを通じてフォームを送信するのに役立ちますが、制限事項:

• 設定されたキーを直接取得することはできません。
• for-in ループまたは console.log を使用して FormData オブジェクトを反復処理すると、キー自体ではなくプロパティの数のみが表示されます。

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