FormData vs .serialize (), quelle est la différence?

Question

Récemment, je soumettais un formulaire en utilisant AJAX. 

En recherchant la meilleure méthode, j'ai vu certaines soumissions AJAX utilisant .serialize() et d'autres utilisant FormData. Par exemple. 

Une soumission a fait ceci: 

data: form.serialize()

tandis que l'autre a: 

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

Alors, quelle est la différence entre FormData et .serialize()?

Answer 1

La principale différence du point de vue de l’utilisation est que vous ne pouvez pas sérialiser les fichiers, mais uniquement les noms de fichiers .... le value d’une entrée de fichier.

L’objet FormData, d’autre part, inclut également les fichiers, le cas échéant.

De plus, serialize() fonctionnera dans les navigateurs plus anciens qui ne prennent pas en charge l'API FormData, par exemple IE <10.

référence FormData docs

Answer 2

Une autre différence importante concerne le traitement des champs de saisie vides dans les formulaires. 

sérialiser ()

contient uniquement des champs d'entrée avec une valeur. Les cases à cocher non cochées ou les champs d'entrée vides seront manquants dans les paires clé/valeur. Par conséquent, le backend de votre application devra effectuer une comptabilité afin d'interpréter les clés manquantes comme des valeurs vides.

Données de formulaire

vous obtiendrez une liste complète de tous vos champs de formulaire et de leurs valeurs. Même s'ils sont vides.