Difference between serialize() & FormData() methods in jQuery.

Introduction:

Hello tech friends today we are talking about difference between serialize() & FormData() methods in jQuery. Both methods are generally used for form data encoding and data processing. but before go further i am giving you some brief information about these two methods. 
serialize() and FormData() are two constructors of jQuery that can manipulate or process form element (tag) data for posting to another page or store into database after form submit using jQuery & Ajax. both the methods are process data with some pros & cons. Without taking so much time let's start with serialize() method.

Serialize() Method:

As per the official documentation by jQuery serialize() encode a set of form elements as a string for submission. The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls.

As per our definition .serialize() only process or submit a

 element data in a serialized string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons are included only if they are checked. Data from file select elements is not serialized.

Simple Syntax:

$( "input, textarea, select" ).serialize();

Highlight Points:

1. serialize() also will work in older browsers that do not support the FormData API for example IE < 10.

2. This method does not send files through form.

3. This method only serialize data in string form using Get & Post.

Working Example:

HTML Code:

<form id="myForm" name="myForm">
    <div>
        <label>Enter name:</label>
        <input type="text" id="username" name="username">
    </div>
    <div>
        <label>Password:</label>
        <input type="text" id="password" name="password">
    </div>
    <input type="button" id="button">
</form>

jQuery Code

$(function () {
    $("#button").click(){
        var dataString = $("#myForm").serialize();
        $.ajax({
            type: "POST",
            url: "upload.php",
            data: dataString,
            success: function (data) {
                alert("Success!");
                $("#myForm")[0].reset();
            }
        });
    });
});

Code Description:

• upload.php is a page where serialized data is posting.
• .reset() is method restores a form element's default values after successfully submission. This method does the same thing as clicking the form's reset button.

FormData() Method:

As per our definition .FormData() submit a

 element data in a Key/Value form. The Form element must have a name attribute. One advantage of FormData() is now you can post a files on next page. 

Simple Syntax:

var formData = new FormData(form);

Highlight Points:

1. This method does post files.

2. This method post complete form using Get & Post method including files.

var formData = new FormData();
formData.append("username", "joe");

3. In addition you could add a key/value pair to this using FormData.append.

Working Example:

HTML Code

<form id="myForm" name="myForm">
        <div>
            <label>Enter name:</label>
            <input type="text" id="username" name="username">
        </div>
        <div>
            <label>Password:</label>
            <input type="text" id="password" name="password">
        </div>
        <div>
            <label>Upload file:</label>
            <input type="file" id="userfile" name="userfile">
        </div>
        <input type="button" id="button">
    </form>

jQuery Code

$(function () {
    $("#button").click(){
        var formData = new FormData("#myForm");
        $.ajax({
            type: "POST",
            url: "upload.php",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                alert("Success!");
                $("#myForm")[0].reset();
            }
        });
    });
});

Code Description:

• upload.php is a page where serialized data is posting.
• processData (false) - Because jQuery will convert the files arrays into strings and the server can't pick it up.(by default true).
• cache (false) - indicating whether the browser should cache the requested pages. (by default true).
• contentType (false)  -  The content type used when sending data to the server and doesn't send the files (Default is: "application/x-www-form-urlencoded").
• .reset() is method restores a form element's default values after successfully submission. This method does the same thing as clicking the form's reset button.

Conclusion:

As you know both the methods work for form data posting or sending. serialize() method send data in string form without files. & .FormData() method sends data in key/value pair with files. So as per your requirement you can choose from methods.

Views