In jquery, we can directly use serialize () to convert ajax submitted forms. In this way, the input in the form name is converted to the get method. If we have a large number of parameters, we do not need to fill them out.
Data in jQuery ajax is sent to the server in the form of Key-Value pairs (Key/Value). When Using ajax to submit form data, you can use jQuery ajax's serialize () method form serialization to key-value pairs (key1 = value1 & key2 = value2 ...) And then submit. The serialize () method uses standard URL-encoded encoding to represent text strings. The following is an example of serialize () serialization form:
JQuery ajax prototype:
| The Code is as follows: |
Copy code |
$. Ajax ({
Type: "POST ",
Url: ajaxCallUrl,
Data: "Key = Value & Key2 = Value2 ",
Success: function (msg) {alert (msg );}
}); |
Ajax serialize ():
| The Code is as follows: |
Copy code |
$. Ajax ({
Type: "POST ",
Url: ajaxCallUrl,
Data: $ ('# formID'). serialize (), // form to be submitted
Success: function (msg) {alert (msg );}
}); |
Serialize () serialized form instance:
| The Code is as follows: |
Copy code |
<Script type = "text/javascript" src = "/demo/jquery/jquery-1.7.2.min.js"
> </Script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Button"). click (function (){
Alert ($ ("# myForm"). serialize ());
});
});
</Script>
<Form id = "myForm">
Name <input value = "liming" Name = "name"/> <br/>
Position <input value = "CEO" name = "position"/> <br/>
<Input id = "button" value = "serialized form" type = "button"/>
</Form> |
Ajax serialize instance
| The Code is as follows: |
Copy code |
Var timer;
// Verify the mobile phone number
Function getVerify (){
If ($ ('# regruser'). val ()){
Var m = $ ('# regruser'). val ();
If (/^ 13d {9} $/g. test (m) | (/^ 15 [0-35-9] d {8} $/g. test (m) | (/^ 18d {9} $/g. test (m ))){
Var postData = $ ('# reg_form'). serialize ();
$. Ajax ({
Type: "POST ",
Url: "/ajax/getVerify ",
Data: postData,
Success: function (msg ){
If (msg> 0 ){
Alert ('verification code has been sent to your mobile phone, please check it ');
$ ('# GetVerify'). hide ();
Certificate ('.regnav'background .css ('background ', 'url (/static/images/v10/regnav2.png )');
$ ('# Checkvalidate'). show ();
F_timeout ();
$ ('. Abc'). show ();
} Else if (msg =-1 ){
Alert ('only one verification code can be received in one minute ');
}
}
});
} Else {
Alert ('Enter the correct mobile phone number ');
}
}
} Function f_timeout (){
(('{Timeb1'{.html ('<span id = "timeb2"> 60 </span> seconds and then reacquire ');
$ ('# Timeb1'). click (function (){});
Timer = self. setInterval (addsec, 1000 ); } Function addsec (){
Var t = ('{timeb2'{.html ();
// Alert (t );
If (t> 0 ){
('{Timeb2'{.html (t-1 );
// Alert (t );
} Else {
Window. clearInterval (timer );
Response ('{timeb1'{.html ('<span id = "timeb2"> </span> re-obtain the verification code ');
$ ('# Timeb1'). click (function () {getVerify ();});
}
} |
Html page
| The Code is as follows: |
Copy code |
<Form id = "reg_form" name = "reg_form" method = "post" onsubmit = "return false;">
<Input value = "" name = "regCyqnumber" type = "hidden" id = "regCyqnumber">
<Ul>
<Li> <span class = "txt_name"> mobile phone number: </span> <input class = "input_user" onblur = "if (this. value = '') this. value = '';" onfocus = "if (this. value = '') this. value = '';" value = "" name = "regRuser" type = "text" id = "regRuser"> </li>
<Li> <span class = "txt_name"> mobile phone verification code: </span> <span class = "code" onclick = "getVerify (); "id =" timeb1 "style =" cursor: pointer "> free Verification Code </span> <input class =" input_code "onblur =" if (this. value = '') this. value = '';" onfocus = "if (this. value = '') this. value = '';" value = "" type = "text" name = "verifyCode" id = "verifyCode"> </li>
<Li> <span class = "txt_name"> logon password: </span> <input class = "input_user" onblur = "if (this. value = '') this. value = '';" onfocus = "if (this. value = '') this. value = '';" value = "" id = "regRpass" name = "regRpass" type = "password"> </li>
<! -- <Li>
<Span class = "txt_name"> Verification Code: </span>
<Div class = "yz_code">
<Span class = "code1" style = "cursor: pointer"> </span>
<Input class = "input_yzcode" autocomplete = "off" onblur = "if (this. value = '') this. value = '';" onfocus = "if (this. value = '') this. value = '';" value = "" type = "text" name = "scode" id = "scode">
</Div> </li> -->
<Li class = "reg">
<Input type = "hidden" value = "1" name = "regCityiD">
<Button type = "submit" title = "register" class = "button_login_index"> register </button>
</Li>
<Li class = "regs"> <span class = "hwlogin"> you have registered, <a href = "/reg/login" target = "_ blank"> Click Log On. </a>, <a href = "/reg"> complete registration </a> </span> </li>
</Ul>
</Form>
|
Problems that may occur when JQuery Ajax submits form data
If the amount of data submitted in the form is large, the "Unknown name" data cannot be submitted in IE browser,
At first, we thought we added data: $ ("# myformId"). serialize (). This problem checks whether the text submitted in the form has the name attribute;
Later, no error is reported in FireFox, but the "Unknown name" problem is still reported in IE, so it is suspected that the data volume is too large and should be submitted in POST mode. Therefore, type: "POST" is added below ", this sentence is enough ..
Therefore, pay attention to the following when submitting form data using JQUERY ajax:
1. The text box of the form must have the name attribute and correspond to the one received in the background.
2. Pay attention to the submission method
Code such
| The Code is as follows: |
Copy code |
Function toSaveOutList (){
$. Ajax ({
Url: "InOrderAction! SaveOutPickInOrder. action ", // submitted action
Data: $ ("# myformId "). serialize (), // obtain the data dataType from the form: "json", // return the Data type in json format: "POST", // set the request type to "POST ", the default value is "GET"
Error: function (request) {// An error occurred while setting the form submission
JAlert ('warning', "submit error, please try again later", 'hup ');
},
Success: function (json) {// usage of setting submission completion
If (json [0]. result = 'success' & json [0]. errorMessage = null ){
JAlert ('warning', 'submitted successfully', 'hs', function (r ){
If (r)
Location. href = "InOrderAction! ToOutPickInOrder. action ";
});
} Else {
JAlert ('warning', json [0]. errorMessage, 'hup ');
}
}
});
} |
