Tôi đã thử console.logvà lặp qua nó bằng cách sử dụng for in.

Đây là Tài liệu tham khảo MDN trên FormData.

Cả hai nỗ lực là trong fiddle này .

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

Làm cách nào tôi có thể kiểm tra dữ liệu biểu mẫu để xem khóa nào đã được đặt.

Phương pháp cập nhật:

Kể từ tháng 3 năm 2016, các phiên bản gần đây của Chrome và Firefox hiện hỗ trợ sử dụng FormData.entries()để kiểm tra FormData. Nguồn .

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

Cảm ơn Ghost Echo và rloth đã chỉ ra điều này!

Câu trả lời cũ:

Sau khi xem các bài viết trên Mozilla này , có vẻ như không có cách nào để lấy dữ liệu ra khỏi một đối tượng FormData. Bạn chỉ có thể sử dụng chúng để xây dựng FormData để gửi qua yêu cầu AJAX.

Tôi cũng vừa tìm thấy câu hỏi này nói lên điều tương tự: FormData.append ("key", "value") không hoạt động .

Một cách để giải quyết vấn đề này là xây dựng một từ điển thông thường và sau đó chuyển đổi nó thành 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]);
}

Nếu bạn muốn gỡ lỗi một đối tượng FormData đơn giản, bạn cũng có thể gửi nó để kiểm tra nó trong bảng điều khiển yêu cầu mạng:

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

Câu trả lời ngắn

console.log(...fd)

Câu trả lời dài hơn

Nếu bạn muốn kiểm tra phần thân thô trông như thế nào thì bạn có thể sử dụng hàm tạo Phản hồi (một phần của API tìm nạp)

var fd = new FormData

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

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

Một số điều ước đề nghị ghi nhật ký từng mục nhập, nhưng console.logcũng có thể lấy nhiều đối số
console.log(foo, bar)
Để lấy bất kỳ số lượng đối số nào bạn có thể sử dụng applyphương thức và gọi nó như sau : console.log.apply(console, array).
Nhưng có một cách ES6 mới để áp dụng các đối số với toán tử trải rộng và iterator
console.log(...array).

Biết được điều này, và thực tế là FormData và cả hai mảng đều có một Symbol.iteratorphương thức trong nguyên mẫu của nó, bạn chỉ có thể thực hiện điều này mà không cần phải lặp lại nó, hoặc gọi .entries()để có được sự lặp lại của trình vòng lặp

var fd = new FormData

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

console.log(...fd)

Tôi sử dụng formData.entries()phương pháp. Tôi không chắc chắn về tất cả các hỗ trợ trình duyệt, nhưng nó hoạt động tốt trên Firefox.

Lấy từ 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]); 
}

Ngoài ra còn có formData.get()và formData.getAll()với sự hỗ trợ trình duyệt rộng hơn, nhưng chúng chỉ đưa ra các Giá trị chứ không phải Khóa. Xem liên kết để biết thêm.

Trong một số trường hợp nhất định, việc sử dụng:

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

là không thể

Tôi đã sử dụng mã này để thay thế:

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

Nó không phải là một mã rất thông minh, nhưng nó hoạt động ...

Hy vọng nó sẽ giúp.

Khi tôi đang làm việc trên Angular 5+ (với TypeScript 2.4.2), tôi đã thử như sau và nó hoạt động trừ lỗi kiểm tra tĩnh nhưng cũng for(var pair of formData.entries())không hoạt động.

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

Kiểm tra tại Stackblitz

Phương pháp dễ dàng

Tôi đã sử dụng mã này trong góc 8

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

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

Giải pháp ES6 +:

Để xem cấu trúc của dữ liệu biểu mẫu:

console.log([...formData])

Để xem từng cặp khóa-giá trị:

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

Đây là một chức năng để ghi nhật ký các mục của đối tượng FormData vào bàn điều khiển dưới dạng đối tượng.

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

Tài liệu MDN trên .entries()

Tài liệu MDN trên .next()và.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) {


            },

       });
}

Bạn phải hiểu rằng FormData::entries()trả về một thể hiện của Iterator.

Lấy mẫu ví dụ này:

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

và vòng lặp JS này:

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

Trong góc 7 tôi có các mục trên bàn điều khiển bằng cách sử dụng dòng mã bên dưới.

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

Đã trả lời nhưng nếu bạn muốn truy xuất các giá trị một cách dễ dàng từ một biểu mẫu đã gửi, bạn có thể sử dụng toán tử trải rộng kết hợp với việc tạo một Bản đồ lặp mới để có được cấu trúc đẹp.

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

trong typeScriptcủa angular 6, mã này đang làm việc cho tôi.

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

hoặc cho tất cả các giá trị:

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

Hãy thử chức năng này:

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

Các MDN cho thấy các hình thức sau đây:

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

Hoặc

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

Xem xét thêm ES + Polyfills , trong trường hợp trình duyệt hoặc môi trường không hỗ trợ API JavaScript và FormData mới nhất.

Tôi hi vọng cái này giúp được.