Use of the jQuery ajax serialize () method and solutions to common problems

When using ajax, you often need to assemble the input data in the form of 'name = abc & sex = 1'. You can easily complete this work using the serialize method of JQuery!

JQuery ajax-serialize () method definition and usage
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 form elements.
Serialized values can be used in URL query strings when an AJAX request is generated.

JQuery ajax-serialize () method syntax
$ (Selector). serialize ()
JQuery ajax-serialize () method description

The. serialize () method creates a text string encoded with a standard URL. Its operation object is a jQuery object that represents the form Element Set.

The jquery ajax-serialize () method has several types of form elements:
Copy codeThe Code is as follows:
<Form>
<Div> <input type = "text" name = "a" value = "1" id = "a"/> </div>
<Div> <input type = "text" name = "B" value = "2" id = "B"/> </div>
<Div> <input type = "hidden" name = "c" value = "3" id = "c"/> </div>
<Div>
<Textarea name = "d" rows = "8" cols = "40"> 4 </textarea>
</Div>
<Div> <select name = "e">
<Option value = "5" selected = "selected"> 5 </option>
<Option value = "6"> 6 </option>
<Option value = "7"> 7 </option>
</Select> </div>
<Div>
<Input type = "checkbox" name = "f" value = "8" id = "f"/>
</Div>
<Div>
<Input type = "submit" name = "g" value = "Submit" id = "g"/>
</Div>
</Form>

The. serialize () method can operate jQuery objects that have selected individual form elements, such as <input>, <textarea>, and <select>. However, it is easier to select the <form> label itself for serialization:
Copy codeThe Code is as follows:
$ ('Form'). submit (function (){
Alert ($ (this). serialize ());
Return false;
});

Output standard query string:
A = 1 & B = 2 & c = 3 & d = 4 & e = 5
JQuery ajax-serialize () method Note: only the "successful control" is serialized as a string. If the button is not used to submit a form, the value of the submit button is not serialized. To include the value of a form element in a sequence string, the element must use the name attribute.

The basic content of the above jQuery ajax-serialize () method is transferred to W3C. The following describes several frequently asked questions about the jQuery ajax-serialize () method.
See the following example:
Copy codeThe Code is as follows:
<Form id = "form1">
<Input name = "name1" type = "text" value = "pipi"/>
<Input name = "name2" type = "radio" value = "1" checked/> boy
<Input name = "name2" type = "radio" value = "0"/> girl
<Textarea name = "name3"> test </textarea>
</Form>

Use: $ ("# form1"). serialize ();
Result: name1 = pipi & name2 = 1 & name3 = test
There is still a problem with the jQuery ajax-serialize () method.
In the following example:
Copy codeThe Code is as follows:
<Form id = "form1">
<Input name = "name" type = "text" value = "pipi"/>
<Input name = "blog" type = "text" value = "blue submarine"/>
</Form>

Use: $ ("# form1"). serialize ();
Result: name1 = pipi & blog = blue + submarine
That is, how can I change the plus sign back to a space?
There is another problem as follows:
Copy codeThe Code is as follows:
<Form id = "form1">
<Input name = "length" type = "text" value = "pipi"/>
<Input name = "blog" type = "text" value = "blue submarine"/>
</Form>

Use: $ ("# form1"). serialize ();
Result: length = pipi cannot appear in blog = blue + submarine.
The reason is that length is the attribute keyword of the js array. If a conflict occurs, change the name to another non-conflicting string.