Jquery.serialize () function syntax and simple example _jquery

Jquery-serialize () method

Definitions and usages given by W3school:

The serialize () method creates a URL-encoded text string by serializing the form value.

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 the URL query string when generating an AJAX request.

Grammar

$ (selector). Serialize () detailed description
The. Serialize () method creates a text string that is represented by a standard URL encoding. Its action object is a JQuery object that represents a collection of form elements.

-------------------------Split Line----------------------

The serialize () function serializes a set of form elements and encodes the form content into a string for submission.

The serialize () function is often used to serialize the contents of a form for use in AJAX submissions.

This function is based primarily on the name and value of a valid form control used for submission, which is spliced into a text string that can be used directly with the form submission, which has been processed by standard URL encoding (character set encoding UTF-8).

The function does not serialize form controls that do not need to be committed, which is consistent with the normal form submission behavior. For example, a form control that is not in the <form> label will not be committed, a form control without a Name property will not be committed, a form control with the disabled property will not be committed, and a form control that is not selected will not be committed.

Unlike regular form submissions, a regular form typically submits a button control with name, and the serialize () function does not serialize a button control with name.

return value

The return value of the Serialize () function is string, which returns the text string that is available for form submission after encoding the form element.

Example & Description

Please refer to the initial HTML code below:

<form name= "MyForm" action= "http://www.365mini.com" method= "POST" > <input name= "UID" type= "hidden" value= "1" /> <input name= "username" type= "text" value= "John"/> "<input" name= "password" type= "text" value= "123456"/&gt
  ; <select name= "Grade" id= "grade" > <option value= "1" > First grade </option> <option value= "2" > Second grade </ Option> <option value= "3" selected= "selected" > Third grade </option> <option value= "4" > Four grade &LT;/OPTION&G
    T <option value= "5" > Grade five </option> <option value= "6" > Six grade </option> </select> <input na Me= "Sex" type= "Radio" checked= "Checked" value= "1"/> male <input name= "Sex" type= "Radio" value= "0"/> Women <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 "Typ E= "button" value= "click" /> </form> 

Serializing a <form> element allows you to serialize all of the form elements inside it directly.

Result of serialization of all table cells//in serialization <form>
: 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 of the form elements directly.

Serializes all text, select, and CheckBox table cells
//serialization results: username=%e5%bc%a0%e4%b8%89&password=123456&grade=3 &hobby=1&hobby=2
Alert ($ (": Text, select,: CheckBox"). Serialize ());

serialize()Functions are often used to serialize the contents of a form so that it can be submitted in an AJAX manner.

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

  //To submit the current form content to the "http://www.365mini.com"
  $.post ("http://") by the Ajax way of the POST request  Www.365mini.com ", $ (" form "). Serialize (), function (data, textstatus, JQXHR) {
    alert (" Successful Ajax commit! ");    
  }
    
);

The above jquery.serialize () function syntax and simple examples are small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.