Denedim console.logve kullanarak döngü for in.

Burada FormData MDN başvurusu .

Her iki girişim de bu kemanın içindedir .

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

Hangi tuşların ayarlandığını görmek için form verilerini nasıl inceleyebilirim.

Güncellenmiş Yöntem:

Mart 2016 itibariyle, Chrome ve Firefox'un son sürümleri artık FormData.entries()FormData'yı denetlemek için kullanmayı destekliyor. Kaynak .

// 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 ve bunu işaret ettiği için rloth sayesinde !

Eski Cevap:

Bu Mozilla makalelerine baktıktan sonra FormData nesnesinden veri almanın bir yolu yok gibi görünüyor. Bunları yalnızca bir AJAX isteği yoluyla göndermek üzere FormData oluşturmak için kullanabilirsiniz.

Ayrıca sadece aynı şeyi bildiren bu soruyu buldum: FormData.append ("anahtar", "değer") çalışmıyor .

Bunun bir yolu düzenli bir sözlük oluşturmak ve daha sonra FormData dönüştürmek olacaktır:

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

Düz bir FormData nesnesinde hata ayıklamak istiyorsanız, bunu ağ istek konsolunda incelemek için de gönderebilirsiniz:

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

Kısa cevap

console.log(...fd)

Daha uzun cevap

Ham gövdenin nasıl görüneceğini incelemek isterseniz, Yanıt yapıcısını (getirme API'sinin bir parçası) kullanabilirsiniz

var fd = new FormData

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

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

Dilek Bazı girişlerin her girişi yapmanızı öneririz ama console.logaynı zamanda birden fazla bağımsız alabilir
console.log(foo, bar)
sen kullanabilirsiniz argüman herhangi bir sayıda çekmek için applyyöntem ve bu şekilde diyoruz: console.log.apply(console, array).
Ancak, yayılma işleci ve yineleyici ile bağımsız değişkenler uygulamanın yeni bir ES6 yolu vardır
console.log(...array).

Bunu bilerek, Ve FormData ve her iki dizinin Symbol.iteratorprototipinde bir yöntemi olduğu gerçeği, bunu sadece döngü yapmak zorunda kalmadan veya .entries()yineleyiciyi tutmak için çağırmadan yapabilirsiniz .

var fd = new FormData

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

console.log(...fd)

I kullanma formData.entries()yöntemi. Tüm tarayıcı desteğinden emin değilim, ancak Firefox'ta iyi çalışıyor.

Alındığı 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]); 
}

Ayrıca formData.get()ve formData.getAll()daha geniş tarayıcı desteği var, ancak Anahtar değil sadece Değerleri getiriyorlar. Daha fazla bilgi için bağlantıya bakın.

Bazı durumlarda, aşağıdakilerin kullanımı:

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

imkansız.

Bu kodu yerine kullandım:

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

Çok akıllı bir kod değil, ama işe yarıyor ...

Umarım yardım eder.

Angular 5+ (TypeScript 2.4.2 ile) üzerinde çalışırken, aşağıdaki gibi denedim ve statik bir kontrol hatası dışında çalışıyor ama aynı zamanda for(var pair of formData.entries())çalışmıyor.

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'e bakın

Kolay Yöntem

Bu kodu açısal 8'de kullandım

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

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

ES6 + çözümleri:

Form verilerinin yapısını görmek için:

console.log([...formData])

Her bir anahtar / değer çiftini görmek için:

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

FormData nesnesinin girişlerini bir nesne olarak konsola kaydetmek için bir işlev.

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 dokümanı .entries()

MDN dokümanı .next()ve.done

  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) {


            },

       });
}

Bunun FormData::entries()bir örneğini döndürdüğünü anlamalısınız Iterator.

Bu örnek formu alın:

<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>

ve bu JS döngüsü:

<script>
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
</script>

Açısal 7'de aşağıdaki kod satırını kullanarak konsolda girişler aldım.

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

Zaten yanıtlandı, ancak gönderilen bir formdan değerleri kolay bir şekilde almak istiyorsanız, güzel bir yapı elde etmek için yeni bir Harita oluşturulabilir ile birlikte forma operatörünü kullanabilirsiniz.

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

içinde typeScriptbir angular 6, bu kod benim için çalışıyor.

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

veya tüm değerler için:

console.log(formData.getAll('name')); // return all values

Bu işlevi deneyin:

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

MDN göstermektedir şu formu:

let formData = new FormData();
formData.append('name', 'Alex Johnson')
for(let keyValuePair of formData.entries()){
    console.log(keyValuePair); //has form ['name','Alex Johnson']
}

alternatif olarak

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

Eklemeyi düşünün ES + Polyfills , durumunda tarayıcı veya çevre son JavaScript ve FormData API desteklemez.

Umarım bu yardımcı olur.