In jquery Ajax, data is sent to the server in the form of a key-value pair (Key/value), which can be serialized as a key-value pair using the jquery Ajax Serialize () method form when submitting form data using AJAX (key1=value1&key2= Value2 ... ) after submission. The Serialize () method represents a text string using a standard url-encoded encoding. The following is an instance of using serialize () to serialize a form:
JQuery Ajax Prototypes:
| 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 submit
Success:function (msg) {alert (msg);}
}); |
Serialize () Serialization of form instances:
| 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 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 cell phone, please check ');
$ (' #getVerify '). Hide ();
$ ('. Regnav '). 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 charged in a minute ');
}
}
});
}else{
Alert (' Please enter the correct phone number ');
}
}
} function F_timeout () {
$ (' #timeb1 '). html (' <span id= "timeb2" after >60</span> seconds);
$ (' #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);
$ (' #timeb1 '). html (' <span id= ' timeb2 ' ></span> re-acquiring authentication 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 number: </span><input class= "Input_user" if (onblur= ") This.value= '; ' onfocus= ' if (this.value== ') this.value= ', value= ' name= "Regruser" type= "text" id= "Regruser" >& Lt;/li>
<li><span class= "Txt_name" > Cell phone Authentication code: </span><span class= "code" onclick= "Getverify" (); "Id=" Timeb1 " style= "Cursor:pointer" > Free access to 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" > Login password: </span><input class= "Input_user" if (onblur= ") 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= "registered" class= "Button_login_index" > Registration </button>
</li>
<li class= "regs" ><span class= "Hwlogin" > You have registered, <a href= "/reg/login" target= "_blank" > click login </a>, <a href= "/reg" > Full registration </a></span></li>
</ul>
</form>
|
Problems that may be encountered jquery Ajax when submitting form data
If the amount of data submitted in the form is relatively large, the "unknown name" data is not submitted in IE browser,
At first thought it was added data: $ ("#myformId"). Serialize (), this question, examines whether the text submitted in the form has a name attribute;
Later in Firefox no longer an error, but IE still reported "unknown name" problem, so suspect that the data is too large, should be submitted by POST, so add type below: "POST", this sentence can be.
So when you do the jquery Ajax submission form data, be sure to note:
1. The form text box and so on to have the name attribute, and the corresponding to receive in the background
2. Note the manner of submission
Code such as
| The code is as follows |
Copy Code |
| function Tosaveoutlist () {
$.ajax ({
URL: "Inorderaction!saveoutpickinorder.action",//Submitted action
Data: $ ("#myformId"). Serialize () ()///From the form DataType: "JSON",///Return data type in JSON format: "POST",//Set request type to "POST", Default to "get"
Error:function (Request) {//Set up a form submission error
Jalert (' warning ', "submit error, please try again later", ' hint ');
},
Success:function (JSON) {//Set submission completion usage
if (json[0].result== ' success ' && json[0].errormessage==null) {
Jalert (' warning ', ' commit success ', ' hint ', function (r) {
if (R)
Location.href= "Inorderaction!tooutpickinorder.action";
});
}else{
Jalert (' warning ', json[0].errormessage, ' hint ');
}
}
});
} |
