Jquery.Form is a simple example of an asynchronous submission Form

(link: http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#)

1. Write a form on your page. A normal form that does not require any special markup:

<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 there is no Jquery.Form component, the Form is submitted, and the page goes into blocking mode, waiting for a server-side response.

2. Introduce jQuery and Form Plugin Javascript script files and add a few simple lines of code to make the page initialize the Form after DOM loading:

< Head>        
< Script type = "text/javascript" SRC = "path/to/jquery. Js" > < / script>        
< Script type = "text/javascript" SRC = "path/to/form. Js" > < / script>          
< The script type = "text/javascript" >                
// wait for the DOM to be loaded               
The $(document). Ready (function () {                       
// bind 'myForm' and provide a simple callback function& providance;                      
// binds the ajaxForm asynchronous commit event for myform and provides a simple callback function.                      
$(' # myForm). AjaxForm (function () {                               
Alert ("Thank you for your comment!") );                        
});                
});        
< / script>
< / head>
After adding jquery. Form component, when submitting the form, the page will no longer submit synchronously, but will be submitted asynchronously by js, so the page will not be refreshed after submitting.

3. Add a callback function that can interact with the server side.

$(document).ready(function () { 
     //Options is an ajaxForm configuration object. ?
     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); 
});  
 //The responseText is the response value on the server side. StatusText is page
 //The status value is submitted and success indicates success.
function callBackFunc(responseText, statusText) { 
    if (statusText == 'success') { 
        alert(responseText); 
    } 
 else{ 
 alert( "Server error! ); 
      } 
} 
 If the return is json The data callback function can be written like this  
function resultFunction(responseText,statusText) { 
        if (statusText == 'success') { 
            if (responseText.code == 1) { 
                alert(responseText.message); 
            }  
            else { 
                alert('error occurs!'); 
            } 
        } 
        else { 
            alert(' Server error! '); 
        } 
    } 

The code of the server 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

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 the  
           // DOM element for the form do this:  
           var formElement = jqForm[0];  

           //alert('About to submit: nn' + queryString); 

           // here we could 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 username is empty, and you are prompted to enter it, and cancel the form submission.