FormData を確認してください: ステップバイステップ ガイド

Question

私は console.log を試し、for in を使用してループさせました。

FormData の MDN リファレンスは次のとおりです。

両方の試行がこのフィドル内にあります。

リーリー

フォームデータをチェックしてどのキーが設定されているかを確認する方法。

Answer 1

いくつかの短い回答

リーリー

長い答え

他の人は、 fd.entries() の各 エントリ をログに記録することを提案していますが、 console.log は複数の引数を取ることもできます
console.log(foo , bar , ...)
任意の数の引数を受け入れるには、apply メソッドを使用して、次のように呼び出します: console.log.apply(console,array )。
ただし、spread 演算子 とイテレータ
console.log(...array) を使用してこれを行う新しい ES6 方法があります。

これと、FormData と配列の両方に Symbol.iterator メソッドがあり、そのプロトタイプでデフォルトの for が指定されているという事実を知っておいてください。 ..of ループを使用すると、formData.entries() メソッドを呼び出さなくても、...iterable を使用してパラメータを展開できます (これはデフォルトの関数であるため) ) 必要に応じて、 for (x of formData)

を実行できます。

リーリー

元の本文がどのように見えるかを確認したい場合は、 レスポンス コンストラクター (Get API の一部) を使用できます。これにより、フォーム データが実際の外観に変換されます。フォームデータをアップロードします

リーリー

Answer 2

更新方法:

2016 年 3 月の時点で、Chrome と Firefox の最新バージョンは、FormData.entries() を使用した FormData のチェックをサポートするようになりました。 ＃＃＃ソース＃＃＃。 リーリー これを指摘してくれた

Ghost Echo

と rloth に感謝します。

古い回答:

これらの

Mozilla 記事を見ると、FormData オブジェクトからデータを取得する方法がないように見えます。これらは、AJAX リクエスト経由で送信する FormData を構築するためにのみ使用できます。 同じことを言っているこの質問も見つけました: FormData.append("key", "value") は機能しません

。

この問題を解決する 1 つの方法は、通常の辞書を構築し、それを FormData に変換することです: リーリー

プレーンな FormData オブジェクトをデバッグしたい場合は、それを送信してネットワーク リクエスト コンソールで検査することもできます。

リーリー