Yếu tố cảnh báo cụ thể trong [object FormData] (để thử nghiệm)

Question

Tôi đang cố gắng xem nội dung nào được chứa bên trong một [object FormData] và đặc biệt bên trong một phần tử cụ thể có tên là Name. Tôi muốn cảnh báo cho nó, để kiểm tra xem nội dung là đúng, nhưng làm như vậy trả undefined:

alert(fd['Name']); 

Tôi chắc chắn rằng tôi đang tải dữ liệu dưới dạng một cách chính xác, vì vậy tôi đã tự hỏi nếu vấn đề là rằng tôi truy cập vào dữ liệu trong một cách sai lầm ...

PS cảnh báo chỉ fd lợi nhuận [object FormData]

Answer 1

IvanZh thông báo với tôi rằng cách tiếp cận này không hiệu quả với anh ta, điều này đã nhắc tôi thực hiện một số nghiên cứu về đối tượng HTML5 FormData. Khi nó quay ra, tôi đã hoàn toàn sai về điều này (xem câu trả lời sai cũ dưới đây). Tất cả dữ liệu cho FormData nằm trong mã gốc. Điều đó có nghĩa là trình duyệt xử lý dữ liệu cho các trường biểu mẫu và tệp tải lên bằng ngôn ngữ thực hiện của nó.

Trích dẫn MDN:

Lưu ý: ... đối tượng FormData không đối tượng stringifiable. Nếu bạn muốn xâu chuỗi dữ liệu đã gửi, hãy sử dụng ví dụ AJAX thuần túy trước đó. Cũng lưu ý rằng, mặc dù trong ví dụ này có một số trường tệp , khi bạn gửi biểu mẫu thông qua API FormData, bạn không cần sử dụng API FileReader cũng: các tệp được tự động tải .

Không có cách nào để thể hiện thông tin này trong JavaScript, vì vậy đề xuất ngây thơ của tôi chỉ đơn giản là sắp xếp nó vì JSON sẽ không hoạt động (nhắc tôi tự hỏi tại sao câu trả lời này được chấp nhận ngay từ đầu).

Tùy thuộc vào những gì bạn đang cố gắng đạt được (ví dụ: nếu bạn chỉ đang cố gỡ lỗi), có thể đơn giản là trả lại thông tin này ra khỏi tập lệnh phía máy chủ trả về siêu dữ liệu JSON có liên quan. Trong PHP, ví dụ, bạn có thể gửi FormData của bạn đến analyzeForm.php, có thể dễ dàng truy cập mọi thứ bạn đã gắn vào FormData theo yêu cầu liên quan superglobal. Kịch bản sẽ tiêu hóa nội dung của biểu mẫu của bạn và trả về thông tin có liên quan dễ dàng để phân tích cú pháp JSON. Điều này là rất không hiệu quả, vì vậy nó có lẽ không thích hợp cho môi trường sản xuất, nhưng nó là một cái gì đó.

Cũ câu trả lời đúng:

Bạn có thể thử sử dụng:

alert(JSON.stringify(fd)); 

để xem một đại diện văn bản về cấu trúc của fd.

Bạn cũng có thể sử dụng console.log, nhưng đây là tính năng không chuẩn và không được đảm bảo có mặt trong tất cả các trình duyệt.

Answer 2

Bạn nên làm:

console.log(fd['Name']); 

Và trong hầu hết các trình duyệt, đặc biệt là chrome bạn mở công cụ Nhà phát triển (F12) và xem bảng điều khiển.

Bạn sẽ có một cái nhìn mở rộng đẹp mắt về đối tượng của mình và bạn có thể kiểm tra nó.

Answer 3

tài Spokey đặt tôi vào kỹ thuật này sử dụng jsFiddle here mà đã rất có ích trong việc có thể "nhìn thấy" các giá trị trong một đối tượng formData, logic phúc cơ bản:

function submitFormFunction() { 
//create formData object 
var myFormData = new FormData(); 
// get the values from some input fields 
var myKey1 = $("input[name='my_field_one']").val(); 
var myKey2 = $("input[name='my_field_two']").val(); 
// append the values to the formData object, whilst also defining their key names 
myFormData.append("my_field_one",myKey1); 
myFormData.append("my_field_two",myKey2); 
// mock implementation - in order to view what is being sent 
var xhr = new XMLHttpRequest; 
xhr.open('POST', '/echo/html/', true); 
xhr.send(myFormData); 
} 

Chỉ cần giữ ' Tab 'Mở trong Firebug và bạn sẽ có thể thấy các giá trị.