FormData created from an existing form seems empty when I log it [duplicate]

问题

This question already has an answer here:

How to inspect FormData? 15 answers

I'm trying to get a set of keys (input names or similar) and values (input values) from a web form:

<body>
  <form>
    <input type="text" name="banana" value="swag">
  </form>

  <script>
    var form = document.querySelector('form');
    var formData = new FormData(form);
  </script>
</body>

According to the FormData documentation, formData should contain the keys and values from the form. But console.log(formData) shows formData is empty.

How can I quickly get the data from the form using FormData?

JSFiddle

回答1:

Update: the XHR spec now includes several more functions to inspect FormData objects.

FireFox has supported the newer functions since v39.0, Chrome is slated to get support in v50. Not sure about other browsers.

var form = document.querySelector('form');
var formData = new FormData(form);

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

//or

console.log(...formData)

回答2:

But console.log(formData) shows formData is empty.

What do you mean by "empty"? When I test this in Chrome it shows ‣ FormData {append: function} ... which is to say it's a FormData object, which is what we expected. I made a fiddle and expanded to code to this:

var form = document.querySelector('form'),
    formData = new FormData(form),
    req = new XMLHttpRequest();

req.open("POST", "/echo/html/")
req.send(formData);

...and this is what I saw in the Chrome Developer Tools Network panel:

So the code is working as expected.

I think the disconnect here is that you're expecting FormData to work like a vanilla JavaScript object or array and let you directly look at and manipulate its contents. Unfortunately it doesn't work like that—FormData only has one method in its public API, which is append. Pretty much all you can do with it is create it, append values to it, and pass it to an XMLHttpRequest.

If you want to get the form values in a way you can inspect and manipulate, you'll have to do it the old-fashioned way: by iterating through the input elements and getting each value one-by-one—or by using a function written by someone else, e.g. jQuery's. Here's an SO thread with a few approaches to that: How can I get form data with JavaScript/jQuery?

回答3:

I also faced the same problem. I wasn't able to see on the console. You need to add the following to the ajax request, so the data will be sent

processData: false, contentType: false

回答4:

As per MDN documentation on FormData

An object implementing FormData can directly be used in a for...of structure, instead of entries(): for (var p of myFormData) is equivalent to for (var p of myFormData.entries()).

Iterating over FormData.entries() didn't worked for me.

Here is what I do to check if formData is empty or not:

                var isFormDataEmpty= true;
                for (var p of formData) {
                    isFormDataEmpty= false;
                    break;
                }

As iterating over formData gives you the uploaded file, you can use it for getting file name, file type validation, etc.

来源：https://stackoverflow.com/questions/25040479/formdata-created-from-an-existing-form-seems-empty-when-i-log-it

标签

javascript

form-data