javascriptjqueryajaxform-data

FormData vs jQuery#serialize(), What is the difference?

Recently I was submitting a form using AJAX.

In researching the best method I saw some AJAX submissions using jQuery#serialize() and others using FormData. For example.

One submission did this: 

data: $('form').serialize()

while the other did: 

var formData = new FormData($('form')[0]);
data: formData

So what is the difference between FormData and jQuery#serialize()?

Solution

  • The main difference from a usage standpoint is that you can't serialize files, only file names....the value of a file input.

    FormData object on the other hand also includes files if applicable.

    Also serialize() will work in older browsers that don't support the FormData API for example IE < 10

    reference FormData docs