Simple Example of asynchronous Form submission using Jquery. Form

Source: Internet
Author: User

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:
Copy codeThe 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.
Copy codeThe 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:
Copy codeThe 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
Copy codeThe 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: \ n \ n' + 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.

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.