web-dev-qa-db-ja.com

FormDataを検査する方法

私はconsole.logを試し、for inを使ってそれをループしてみました。

ここでは、FormDataの MDN Reference です。

両方の試みがこれにあります いじる 。

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

どのようにしてフォームデータを調べて、どのキーが設定されているかを調べることができます。

javascriptform-data
159
user1637281

更新方法：

2016年3月現在、ChromeとFirefoxの最近のバージョンでは、FormDataの検査にFormData.entries()の使用をサポートしています。 出典 。

// 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 Echo と rloth に感謝します！

古い答え：

theseMozillaarticles を見てみると、FormDataオブジェクトからデータを取り出す方法がないようです。 FormDataを構築してAJAXリクエストを介して送信するためにのみ使用できます。

私もちょうど同じことを述べているこの質問を見つけました： FormData.append（ "key"、 "value"）はうまくいかない .

これを回避する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]);
}

プレーンなFormDataオブジェクトをデバッグする場合は、ネットワーク要求コンソールでそれを調べるために送信することもできます。

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

私はformData.entries()メソッドを使います。私はすべてのブラウザのサポートについてはよくわかりませんが、Firefoxでは問題なく動作します。

https://developer.mozilla.org/en-US/docs/Web/API/FormData/entriesから取得

// 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.get()およびformData.getAll()もありますが、それらは値ではなくキーのみを表示します。詳細についてはリンクを参照してください。

34
Ghost Echo

短い答え

console.log(...fd)

長い答え

生の本体がどのように見えるのかを調べたい場合は、 Responseコンストラクタ （フェッチAPIの一部）を使用できます。

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

new Response(fd).text().then(console.log)

エントリの各エントリをログに記録することをお勧めする人もいますが、console.logは複数の引数を取ることもできます。
console.log(foo, bar)
任意の数の引数を取るには、applyメソッドを使用して、そのように呼び出すことができます。console.log.apply(console, array)。
しかし、 スプレッド演算子 とイテレータを使って引数を適用するための新しいES6の方法があります。
console.log(...array)。

これを知って、そしてFormDataとその両方の配列がそのプロトタイプにSymbol.iteratorメソッドを持っているという事実は、それをループする必要なしに単にこれをすることができるか、あるいはイテレーターを取得するために.entries()を呼び出す

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

console.log(...fd)
30
Endless

場合によっては、

for(var pair of formData.entries(){...

不可能です。

このコードを代わりに使用しました。

var outputLog = {}, iterator = myFormData.entries(), end = false;
while(end == false) {
   var item = iterator.next();
   if(item.value!=undefined) {
       outputLog[item.value[0]] = item.value[1];
   } else if(item.done==true) {
       end = true;
   }
    }
console.log(outputLog);

それほどスマートなコードではありませんが、うまくいきます...

それが助けになることを願っています。

8
Luc

TypeScript 2.4.2でAngular 5+を使って作業しているときに、次のように試みましたが、静的なチェックエラー以外は機能しますが、for(var pair of formData.entries())も機能しません。

formData.forEach((value,key) => {
      console.log(key+" "+value)
});

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

formData.forEach((value,key) => {
  console.log(key+" "+value)
});

Stackblitzで確認

4
Gurkan Yesilyurt

ES6 +ソリューション：

フォームデータの構造を見るには：

console.log([...formData])

各キーと値のペアを見るには：

for (let [key, value] of formData.entries()) {
  console.log(key, ':', value);
}
4
Hooray Im Helping

これは、FormDataオブジェクトのエントリをオブジェクトとしてコンソールに記録する関数です。

export const logFormData = (formData) => {
    const entries = formData.entries();
    const result = {};
    let next;
    let pair;
    while ((next = entries.next()) && next.done === false) {
        pair = next.value;
        result[pair[0]] = pair[1];
    }
    console.log(result);
};

MDNの.entries()のドキュメント

MDNの.next()と.doneのドキュメント

2
jtheletter

FormData::entries()はIteratorのインスタンスを返すことを理解する必要があります。

このフォームの例を見てください。

<form name="test" id="form-id">
    <label for="name">Name</label>
    <input name="name" id="name" type="text">
    <label for="pass">Password</label>
    <input name="pass" id="pass" type="text">
</form>

そしてこのJSループ：

<script>
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
</script>
2
kaiser
  function abc(){ 
    var form = $('#form_name')[0]; 
        var formData = new FormData(form);
        for (var [key, value] of formData.entries()) { 
            console.log(key, value);
        }
        $.ajax({
            type: "POST",
            url: " ",
            data:  formData,
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function() {

            },
            success: function(data) {


            },

       });
}
2
sparsh turkane

この機能を試してください。

function formDataToObject(formData) {
  return Array.from(formData.entries()).reduce((old, pair) => ({
    ...old,
    [pair[0]]: pair[1],
  }), {});
}
1
Mauro

角度7で私はコードの下の行を使用してコンソールにエントリを得た。

formData.forEach(entries => console.log(entries));
1
Yousuf

angular 6のTypeScriptで、このコードは機能しています。

var formData = new FormData();
formData.append('name', 'value1');
formData.append('name', 'value2');
console.log(formData.get('name')); // this is return first element value.

またはすべての値に対して：

console.log(formData.getAll('name')); // return all values
0
A.R.F

すでに回答済みですが、送信されたフォームから簡単な方法で値を取得したい場合は、スプレッド演算子を使用して新しいMap反復可能オブジェクトを作成し、Nice構造を取得できます。

new Map([...new FormData(form)])

0
ngr

これを試して ：：

let formdata = new formData()
formdata.append('name', 'Alex Johnson')
for(let i of formdata){
    console.log(i)
}
0
Manioz