Http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html
1. Write a form on your page. A plain form that does not require any special tags:
Copy Code code as follows:
<form id= "MyForm" method= "post" action= "/home/ajaxform" >
<div>
Name:<input id= "username" name= "username" type= "text"/>
Password:<input id= "Password" name= "Password" type= "text"/>
<br/>
<input type= "Submit" value= "Submit Async" id= "Lnksubmit"/>
</div>
</form>
in the absence of a jquery.form component, submitting the form, the page goes into blocking mode, waiting for the server-side response.
2. Introduce jquery and form Plugin JavaScript script files and add a few simple code to initialize the form after the DOM load completes:
<script type= "Text/javascript" src= "Path/to/jquery.js" ></script>
<script type= "Text/javascript" src= "Path/to/form.js" ></script>
<script type= "Text/javascript" >
Wait for the DOM to be loaded
$ (document). Ready (function () {
Bind ' myForm ' and provide a simple callback function
Asynchronously commits the event for the MyForm binding Ajaxform and provides a simple callback function.
$ (' #myForm '). Ajaxform (function () {
Alert ("Thank for Your comment!");
});
});
</script>
Plus the Jquery.form component, when submitting the form, the page will not be synchronous submission, but by JS do asynchronous submission, so the page will not be refreshed after submission.
3. Join the callback function that can interact with the server side.
Copy Code code as follows:
$ (document). Ready (function () {
The options is a Ajaxform configuration object.
var options = {
Target: ' #output1 ',//target element (s) to is updated with server response
Beforesubmit:showrequest,//Pre-submit callback
<font color= #ff0000 > Success:callbackfunc//Post-submit callback</font>
Other available options:
Url:url//Override for form ' s ' action ' attribute
Type:type//' get ' or ' post ', override for form '
Datatype:null//' xml ', ' script ', or ' JSON ' (expected server response type)
Clearform:true//Clear all form fields after successful submit
Resetform:true//Reset the form after successful submit
$.ajax options can be used this too, for example:
timeout:3000
};
Bind form using ' Ajaxform '
$ (' #myForm '). Ajaxform (options);
});
ResponseText is the response value of the service side. StatusText is the page
Commit status value, success represents success.
function Callbackfunc (responsetext, statustext) {
if (statustext = = ' success ') {
alert (responsetext);
}
else{
Alert ("Server-side Error!") ”);
}
}
If the JSON data is returned, the callback function can write this
function Resultfunction (responsetext,statustext) {
if (statustext = = ' success ') {
if (Responsetext.code = = 1) {
alert (responsetext.message);
}
else {
Alert (' Error occurs! ');
}
}
else {
Alert (' Server Error! ');
}
}
The service-side code is as follows:
Copy Code code as follows:
[HttpPost]
Public ActionResult ajaxform (formcollection form)
{
String message = "Name:" + form["username"] + "PWD:" +form["password"];
return Content (message);
Return Json (New {code = 1, message = message});
}
4. Data validation function before submitting
Add a Beforesubmit property to a Options object
Copy Code code as follows:
var options = {
Target: ' #output1 ',//target element (s) to is updated with server response
<font color= #ff0000 >beforesubmit:checkdata,//Pre-submit callback
</FONT> Success:callbackfunc//Post-submit callback
Other available options:
Url:url//Override for form ' s ' action ' attribute
Type:type//' get ' or ' post ', override for form '
Datatype:null//' xml ', ' script ', or ' JSON ' (expected server response type)
Clearform:true//Clear all form fields after successful submit
Resetform:true//Reset the form after successful submit
$.ajax options can be used this too, for example:
timeout:3000
};
Pre-submit Callback
function Checkdata (FormData, Jqform, options) {
FormData is an array; Here we use $.param to convert it to a string to display it
But the "form plugin does" for your automatically when it submits the data
var querystring = $.param (FormData);
Jqform is a JQuery object encapsulating the form element. To access the
DOM element for the form does this:
var formelement = jqform[0];
Alert (' About to submit: \ n ' + querystring ');
Here we are could return false to prevent the form from being submitted;
Returning anything other than false would allow the form submit to continue
return true;
if ($ (formelement). Find ("#username"). val () = "") {
Alert ("Please enter username!");
return false;
} else {
return true;
}
}
Verify that the user name is empty, prompt for input, and cancel the form submission.
