JQuery implements the Ajax form submission program

Description: This section describes how to quickly convert a common form into an ajax-based submission and display the result in the dialog box.
Body:
We have a very common form:
 
<Form id = "form1" name = "form1" method = "get" action = "post.html">
Title <input id = "testtitle" name = "testtitle" type = "text" size = "40"/>
<Input type = "submit" value = "submit">
</Form>
For ease of demonstration, the method uses get and can be changed to post as needed.
 
Now Let's transform it into AJAX-based submission. The method is simple. Just copy the following code to the page:
 
<Link type = "text/css" href = "jquery-ui.css" rel = "stylesheet"/>
<Style>
# Loading {background-image: url (images/loading.gif); background-position: 0px 0px; background-repeat: no-repeat; position: absolute; width: 50px; height: 50px; top: 60%; left: 50%; margin-left:-25px; text-align: center ;}
</Style>
<Script type = "text/javascript" src = "jquery. js"> </script>
<Script type = "text/javascript" src = "jquery. form. js"> </script>
<Script type = "text/javascript" src = "jquery-ui.js"> </script>
<Script type = "text/javascript">
$ (Function (){
BindSubmit ();
$ ("# Loading"). hide ();
$ ("# Msgdlg"). hide ();
});

Function bindSubmit (){
Var options = {
Target: '# msgdlg ',
Success: showResponse,
Error: showError

// Other optional parameters:
// 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, such as timeout:
// Timeout: 3000
};

$ ('# Form1'). submit (function (){
$ (This). ajaxSubmit (options );
$ ("# Loading"). show ();
Return false;
});
}

// Callback function for successful response
Function showResponse (responseText, statusText, xhr, $ form ){
$ ("# Loading"). hide ();
Messagebox (responseText );
}

// Response failed
Function showError (xhr, ajaxOptions, thrownError ){
$ ("# Loading"). hide ();
Messagebox ("error! "+ ThrownError );
}

// Displayed result dialog box
Function messagebox (msg ){
$ ("# Msgdlg" cmd.html (msg );
$ ("# Dialog: ui-dialog"). dialog ("destroy ");
$ ("# Msgdlg"). dialog ({
Modal: true,
Width: 380,
Height: 230,
Buttons :{
Confirm: function (){
$ (This). dialog ("close ");
                }
            }
});
}
</Script>

<Div id = "msgdlg" title = "Message"> </div>
<Div id = "loading" style = "display: none" ondblclick = "this. style. display = 'none'"> </div>
Key points in the code:
(1) $ ('# form1'). submit () binds the Form Submit (jquery. form. js is used)
(2) the showResponse function is defined to process the returned information.
(3) $ ("# msgdlg"). dialog () create dialog box and display the result (with jquery-ui.js)