jquery. serialize of Function Syntax and Simple Example

  • 2021-07-02 22:58:41
  • OfStack

jQuery-serialize () method

Definition and usage given by W3School:

The serialize () method creates an URL encoded text string by serializing the form values.

You can select one or more form elements (such as input and/or text boxes), or the form element itself.

The serialized value can be used in an URL query string when an AJAX request is generated.

Grammar

$(selector). serialize () Details
The. serialize () method creates a text string represented in standard URL encoding. Its manipulation object is an jQuery object representing a collection of form elements.


----------------------------

The serialize () function serializes a set of form elements, encoding the form contents as strings for submission.

The serialize () function is often used to serialize form contents for AJAX submission.

Based on the name and value of the valid form controls for submission, this function splices them into a text string that can be used directly for form submission, which has been encoded by standard URL (character set encoding is UTF-8).

This function does not serialize form controls that do not need to be submitted, which is the same as normal form submission behavior. For example: Not in < form > Form controls within labels are not submitted, form controls without name properties are not submitted, form controls with disabled properties are not submitted, and form controls that are not selected are not submitted.

Unlike regular form submission, regular form 1 submits button controls with name, whereas the serialize () function does not serialize button controls with name.

Return value

The return value of the serialize () function is of type String, and returns a text string that can be used for form submission after encoding the form elements.

Example & Description

Please refer to the following initial HTML code:


<form name="myForm" action="http://www.365mini.com" method="post">
  <input name="uid" type="hidden" value="1" />
  <input name="username" type="text" value=" Zhang 3" />
  <input name="password" type="text" value="123456" />
  <select name="grade" id="grade">
    <option value="1">1 Grade </option>
    <option value="2">2 Grade </option>
    <option value="3" selected="selected">3 Grade </option>
    <option value="4">4 Grade </option>
    <option value="5">5 Grade </option>
    <option value="6">6 Grade </option>
  </select>
  <input name="sex" type="radio" checked="checked" value="1" /> Male 
  <input name="sex" type="radio" value="0" /> Female 
  <input name="hobby" type="checkbox" checked="checked" value="1" /> Swimming 
  <input name="hobby" type="checkbox" checked="checked" value="2" /> Running 
  <input name="hobby" type="checkbox" value="3" /> Badminton 
  <input name="btn" id="btn" type="button" value=" Click " />
</form>

Right < form > Element can directly serialize all the form elements inside it.


//  Serialization <form> All form elements in the 
//  Result after serialization: uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );

We can also serialize some form elements directly.


//  Serialize all of the text , select , checkbox Form element 
//  Result after serialization: username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text, select, :checkbox").serialize() );

serialize() Function is usually used to serialize the contents of a form for submission through AJAX.


$("#btn").click( function(){

  //  Sets the contents of the current form with POST Requested AJAX Method to submit to "http://www.365mini.com"
  $.post( "http://www.365mini.com", $("form").serialize(), function( data, textStatus, jqXHR ){
    alert( "AJAX Submission Successful !" );    
  } );
    
} );

Related articles: