Home > Developer > JavaScript
Simple Example of asynchronous Form submission using Jquery. Form
This article describes a simple example of Jquery. Form asynchronous Form submission. For more information, see.
Http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html #
1. Write a form on your page. A common form does not require any special markup:
The Code is 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>
When the Jquery. Form component is not available, the page enters the blocking mode and waits for the response from the server.
2. Introduce jQuery and Form Plugin Javascript script files and add a few simple codes to initialize the Form after the DOM is loaded:
<Head>
<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
// Bind an ajaxForm asynchronous event to myform and provide a simple callback function.
$ ('# MyForm'). ajaxForm (function (){
Alert ("Thank you for your comment! ");
});
});
</Script>
</Head>
After the jquery. form component is added, the page will not be submitted synchronously when the form is submitted, but is asynchronously submitted by js. Therefore, the page will not be refreshed after the submission.
3. Add a callback function that can interact with the server.
The Code is as follows:
$ (Document). ready (function (){
// Options is a configuration object of ajaxForm .?
Var options = {
// Target: '# output1', // target element (s) to be 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's 'method' attribute
// 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 here too, for example:
// Timeout: 3000
};
// Bind form using 'ajaxform'
$ ('# MyForm'). ajaxForm (options );
});
// ResponseText is the response value of the server. StatusText is a page
// Submission status value. success indicates that the request is successful.
Function callBackFunc (responseText, statusText ){
If (statusText = 'success '){
Alert (responseText );
}
Else {
Alert ("Server Error !");
}
}
If json data is returned, the callback function can be written in this way.
Function resultFunction (responseText, statusText ){
If (statusText = 'success '){
If (responseText. code = 1 ){
Alert (responseText. message );
}
Else {
Alert ('error occurs! ');
}
}
Else {
Alert ('server error! ');
}
}
The server code is as follows:
The Code is 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. Add the data verification function before submission
Add the beforeSubmit attribute to the options object
The Code is as follows:
Var options = {
// Target: '# output1', // target element (s) to be 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's 'method' attribute
// 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 here 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 this for you automatically when it submits the data
// Var queryString = $. param (formData );
// JqForm is a jQuery object encapsulating the form element. To access
// DOM element for the form do this:
Var formElement = jqForm [0];
// Alert ('About to submit: nn' + queryString );
// Here we cocould return false to prevent the form from being submitted;
// Returning anything other than false will 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. If yes, the system prompts you to enter it and cancels form submission.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
