JQuery ajax serialize () submits form data

Source: Internet
Author: User

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 ');
}
}
});
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.