ฉันได้พยายาม และบ่วงผ่านมันใช้console.logfor in

นี่คือMDN Referenceบน FormData

ความพยายามทั้งสองอยู่ในซอนี้

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

ฉันจะตรวจสอบข้อมูลฟอร์มเพื่อดูว่ามีการตั้งค่าคีย์อย่างไร

วิธีการปรับปรุง:

ตั้งแต่เดือนมีนาคม 2559 ปัจจุบัน 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]); 
}

ขอบคุณGhost Echoและrloth ที่ชี้เรื่องนี้ออกมา!

คำตอบเก่า:

หลังจากดูบทความMozilla เหล่านี้ ดูเหมือนว่าไม่มีวิธีในการรับข้อมูลจากวัตถุ FormData คุณสามารถใช้พวกเขาสำหรับการสร้าง FormData เพื่อส่งผ่านคำขอ AJAX

ฉันยังพบเพียงแค่คำถามนี้ที่ระบุว่าสิ่งเดียวกัน: FormData.append ( "กุญแจ", "value") ไม่ทำงาน

วิธีหนึ่งในการทำเช่นนี้คือการสร้างพจนานุกรมปกติแล้วแปลงเป็น 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);

คำตอบสั้น ๆ

console.log(...fd)

คำตอบอีกต่อไป

หากคุณต้องการตรวจสอบว่าร่างกายดิบมีลักษณะอย่างไรคุณสามารถใช้ตัวสร้างการตอบกลับ (ส่วนหนึ่งของการดึงข้อมูล 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 แต่มีวิธีที่ ES6 ใหม่เพื่อใช้การขัดแย้งกับผู้ประกอบการแพร่กระจายและ iteratorconsole.log.apply(console, array)

console.log(...array)

เมื่อรู้อย่างนี้แล้วความจริงที่ว่า FormData และอาเรย์ทั้งสองนั้นมีSymbol.iteratorวิธีการในต้นแบบของมันคุณก็สามารถทำได้โดยไม่ต้องวนซ้ำหรือเรียก.entries()ให้ได้ตัววนซ้ำ

var fd = new FormData

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

console.log(...fd)

ฉันใช้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()รองรับเบราว์เซอร์ที่กว้างขึ้น แต่จะแสดงเฉพาะค่าไม่ใช่คีย์ ดูลิงค์สำหรับข้อมูลเพิ่มเติม

ในบางกรณีการใช้:

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

มันไม่ใช่รหัสที่ฉลาดมาก แต่ใช้งานได้ ...

หวังว่ามันจะช่วยได้

เมื่อฉันกำลังทำงานกับ Angular 5+ (ด้วย TypeScript 2.4.2) ฉันลองดังต่อไปนี้และทำงานได้ยกเว้นข้อผิดพลาดการตรวจสอบแบบสแตติก แต่ยัง 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

วิธีการง่าย ๆ

ฉันใช้รหัสนี้ในเชิงมุม 8

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

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

โซลูชัน ES6 +:

หากต้องการดูโครงสร้างของข้อมูลในฟอร์ม:

console.log([...formData])

วิธีดูคู่คีย์ - ค่าแต่ละรายการ:

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

นี่คือฟังก์ชั่นเพื่อบันทึกรายการของวัตถุ 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 doc .entries()

MDN doc on .next()และ.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) {


            },

       });
}

คุณต้องเข้าใจว่าผลตอบแทนตัวอย่างของ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-loop นี้:

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

ในเชิงมุม 7 ฉันได้รับรายการบนคอนโซลโดยใช้บรรทัดด้านล่างของรหัส

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

ตอบแล้ว แต่ถ้าคุณต้องการดึงค่าในวิธีที่ง่ายจากแบบฟอร์มที่ส่งคุณสามารถใช้ตัวดำเนินการสเปรดรวมกับการสร้าง Map iterable ใหม่เพื่อให้ได้โครงสร้างที่ดี

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

ในtypeScriptจากangular 6รหัสนี้ทำงานสำหรับฉัน

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

ลองใช้ฟังก์ชั่นนี้:

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

MDN แสดงให้เห็นรูปแบบต่อไปนี้:

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

อีกทางเลือกหนึ่ง

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

พิจารณาเพิ่มES + Polyfillsในกรณีที่เบราว์เซอร์หรือสภาพแวดล้อมไม่รองรับ JavaScript และ FormData API ล่าสุด

ฉันหวังว่านี่จะช่วยได้.