jQuery Introduction | Using Ajax | Ajax and Form Elements .serialize()

Tags:

Ajax and Form Elements

In Ajax, data entered through form elements is serialized and sent for asynchronous communication with the server.

Here, serialization means turning multiple pieces of input data into a single query string.
This makes it possible to send the data entered through form elements to the server all at once.

Serialization

jQuery makes it very easy to serialize data entered through HTML form elements.
You can easily serialize data by using the .serialize() method and the .serializeArray() method. The .serialize() method converts data entered through HTML form elements into a query string.
Unlike the serialize() method, the .serializeArray() method converts the entered data into an array object rather than a string.

The following example displays the value created by applying .serialize() to a <form> element.

function showValues() {
    $("#text").text($("form").serialize());
}
$("input[type='text']").on("keydown", showValues);
$("input[type='checkbox'], input[type='radio']").on("click", showValues);
$("select").on("change", showValues);

Run code

When input data containing Korean characters is converted into a query string, it is converted through percent-encoding.
At this time, every Korean character is converted into a hexadecimal value that includes the percent sign (%).

Reference