Difference Between Serialize() & FormData() Methods In JQuery.
Rajat Kumar (Tech Head) | Last Updated: June 05, 2018 | 15,153 Views 28 Author Credit
Background:
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:
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
<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
$("#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:
Highlight Points:
1. This method does post files.
2. This method post complete form using Get & Post method including files.
formData.append('username', 'joe');
3.In addition you could add a key/value pair to this using FormData.append
.
Working Example:
HTML Code
<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
$("#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.
Thank you for reading if you like this article hit kudos and give +1 credit to author. You can also comment your suggestion or feedback about this article by simply joining our community.
0 Comments | 19 Kudos
Related Articles
- Currently no related articles
Comments (0)
Article Author
-
Rajat Kumar
30 Posts
Popular Posts
- Difference between serialize() & FormData() methods in jQuery. (19)
- Difference between SMTP, IMAP and POP3 in mail & data transmission. (10)
- Basics of Cyber security to protect information & data from hackers (Session-1). (4)
- Concepts & techniques to find vulnerability and prevent the cyber-attacks (Session-2). (3)
- E-R Model Diagram and Extended E-R Feature in DBMS (3)