Let’s first talk about the commonly used Form plug-ins, which support Ajax and Ajax file uploads. They are powerful and basically meet daily applications.
1. Download the latest JQuery framework package
Compressed package
Non-compressed package
2. Form plug-in download
3. A simple introduction to Form plug-in
Step 1: Add a form first
Code:
<form action="" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>
Step 2: Inclusion of the file
Code:
<head>
<script type="text/javascript" src="path/to/"></script>
<script type="text/javascript" src="path/to/"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
</head>
3. Detailed usage methods and application examples of Form plug-in
/jquery/form/
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
When introducing the plugin, the author said this:
Quote:
Submitting a form with AJAX doesn't get any easier than this!
It means that using Ajax to submit the form, you can't find anything easier than this. Haha———You will know whether to blow water or not.
Form Plugin API
Original English: /jquery/form/#api
The Form Plugin API provides several ways to easily manage form data and perform form submissions.
ajaxForm
Add all required event listeners to prepare for AJAX submission form. ajaxForm cannot submit forms. In the document's ready function, use ajaxForm to prepare for AJAX submission form. ajaxForm accepts 0 or 1 parameter. This single parameter can be either a callback function or an Options object.
Chainable: Yes.
Example:
Code:
$('#myFormId').ajaxForm();
ajaxSubmit
Submit the form immediately by AJAX. In most cases, ajaxSubmit is called to respond to the user's submission form. ajaxSubmit accepts 0 or 1 parameter. This single parameter can be either a callback function or an Options object.
Chainable: Yes.
Example:
Code:
// Bind form submission event handler
$('#myFormId').submit(function() {
// Submit the form
$(this).ajaxSubmit();
// In order to prevent ordinary browsers from submitting form and generating page navigation (preventing page refresh?) return false
return false;
});
formSerialize
Serialize (or serialize) the form into a query string. This method will return a string in the following format: name1=value1&name2=value2.
Chainable: No, this method returns a string.
Example:
Code:
var queryString = $('#myFormId').formSerialize();
// You can now use $.get, $.post, $.ajax, etc. to submit data
$.post('', queryString);
fieldSerialize
Serialize (or serialize) the form's field elements into a query string. This is convenient when only some form fields need to be serialized (or serialized). This method will return a string in the following format: name1=value1&name2=value2.
Chainable: No, this method returns a string.
Example:
Code:
var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue
Returns the value of the form element that matches the insertion array. Starting from version 0.91, this method will always return data as an array. If the element value is judged to be invalid, the array is empty, otherwise it will contain one or more element values.
Chainable: No, this method returns an array.
Example:
Code:
// Get the password input value
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);
resetForm
By calling the original DOM method of the form element, the form will be restored to its initial state.
Chainable: Yes.
Example:
Code:
$('#myFormId').resetForm();
clearForm
Clear form elements. This method emptys all text input fields, password input fields, and textarea fields, clears the selection in any select element, and resets all radio buttons and checkbox buttons to non-selected states.
Chainable: Yes.
Code:
$('#myFormId').clearForm();
clearFields
Clear field elements. It is convenient to use only when some form elements need to be cleared.
Chainable: Yes.
Code:
$('#myFormId .specialFields').clearFields();
Options object
Both ajaxForm and ajaxSubmit support a number of option parameters, which can be provided using an Options object. Options is just a JavaScript object, which contains the following collection of attributes and values:
target
Specifies the element in the page that is updated by the server response. The value of an element may be specified as a jQuery selector string, a jQuery object, or a DOM element.
Default value: null.
url
Specifies the URL to submit the form data.
Default value: The action attribute value of the form
type
Specifies the method for submitting form data: "GET" or "POST".
Default value: The method attribute value of the form (default is "GET" if not found).
beforeSubmit
A callback function called before the form is submitted. The "beforeSubmit" callback function is provided as a hook to run pre-submit logic or to verify form data. If the "beforeSubmit" callback function returns false, the form will not be submitted. The "beforeSubmit" callback function takes three call parameters: form data in array form, jQuery form object, and Options object passed into ajaxForm/ajaxSubmit. The form array accepts data in the following ways:
Code:
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
Default value: null
success
The callback function called after the form is successfully submitted. If the "success" callback function is provided, it is called when the response is returned from the server. Then the dataType option value determines whether to pass back responseText or responseXML value.
Default value: null
dataType
The expected return type of data. One of null, "xml", "script" or "json". dataType provides a method that specifies how the server's response is handled. This is directly reflected in the method. The following values are supported:
'xml': If dataType == 'xml', the server response will be treated as XML. Meanwhile, if the "success" callback method is specified, the responseXML value will be passed back.
'json': If dataType == 'json', the server response will be evaluated and passed to the 'success' callback method if it is specified.
'script': If dataType == 'script', the server response will evaluate to plain text.
(Translator's note: Some of the above places are not clear, so I had to translate it intently, hoping to express the original meaning.)
Default value: null (the server returns the responseText value)
semantic
Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".
Boolean flag indicates whether the data must be submitted strictly in semantic order (slower?). Note: Generally speaking, forms have been serialized (or serialized) in semantic order, except for the input element of type="image". If your server has strict semantic requirements and the form contains an input element with type="image" in it, you should set semantic to true. (Translator's note: This paragraph may not be understood, and the translation may not be meaningful, but please ask the expert to correct it.)
Default value: false
resetForm
Boolean flag indicating whether to reset if the form is submitted successfully.
Default value: null
clearForm
Boolean flag indicating whether form data is cleared if form submission is successful.
Default value: null
Example:
Code:
[/code]
// Prepare the Options object
var options = {
target: '#divToUpdate',
url: '',
success: function() {
alert('Thanks for your comment!');
} };
// Pass options to ajaxForm
$('#myForm').ajaxForm(options);
[/code]
Note: The Options object can also be used to pass values to jQuery's $.ajax method. If you are familiar with the options supported by $.ajax, you can use them to pass Options objects to ajaxForm and ajaxSubmit.
1. Download the latest JQuery framework package
Compressed package
Non-compressed package
2. Form plug-in download
3. A simple introduction to Form plug-in
Step 1: Add a form first
Code:
Copy the codeThe code is as follows:
<form action="" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>
Step 2: Inclusion of the file
Code:
Copy the codeThe code is as follows:
<head>
<script type="text/javascript" src="path/to/"></script>
<script type="text/javascript" src="path/to/"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
</head>
3. Detailed usage methods and application examples of Form plug-in
/jquery/form/
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
When introducing the plugin, the author said this:
Quote:
Submitting a form with AJAX doesn't get any easier than this!
It means that using Ajax to submit the form, you can't find anything easier than this. Haha———You will know whether to blow water or not.
Form Plugin API
Original English: /jquery/form/#api
The Form Plugin API provides several ways to easily manage form data and perform form submissions.
ajaxForm
Add all required event listeners to prepare for AJAX submission form. ajaxForm cannot submit forms. In the document's ready function, use ajaxForm to prepare for AJAX submission form. ajaxForm accepts 0 or 1 parameter. This single parameter can be either a callback function or an Options object.
Chainable: Yes.
Example:
Code:
Copy the codeThe code is as follows:
$('#myFormId').ajaxForm();
ajaxSubmit
Submit the form immediately by AJAX. In most cases, ajaxSubmit is called to respond to the user's submission form. ajaxSubmit accepts 0 or 1 parameter. This single parameter can be either a callback function or an Options object.
Chainable: Yes.
Example:
Code:
Copy the codeThe code is as follows:
// Bind form submission event handler
$('#myFormId').submit(function() {
// Submit the form
$(this).ajaxSubmit();
// In order to prevent ordinary browsers from submitting form and generating page navigation (preventing page refresh?) return false
return false;
});
formSerialize
Serialize (or serialize) the form into a query string. This method will return a string in the following format: name1=value1&name2=value2.
Chainable: No, this method returns a string.
Example:
Code:
Copy the codeThe code is as follows:
var queryString = $('#myFormId').formSerialize();
// You can now use $.get, $.post, $.ajax, etc. to submit data
$.post('', queryString);
fieldSerialize
Serialize (or serialize) the form's field elements into a query string. This is convenient when only some form fields need to be serialized (or serialized). This method will return a string in the following format: name1=value1&name2=value2.
Chainable: No, this method returns a string.
Example:
Code:
var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue
Returns the value of the form element that matches the insertion array. Starting from version 0.91, this method will always return data as an array. If the element value is judged to be invalid, the array is empty, otherwise it will contain one or more element values.
Chainable: No, this method returns an array.
Example:
Code:
Copy the codeThe code is as follows:
// Get the password input value
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);
resetForm
By calling the original DOM method of the form element, the form will be restored to its initial state.
Chainable: Yes.
Example:
Code:
$('#myFormId').resetForm();
clearForm
Clear form elements. This method emptys all text input fields, password input fields, and textarea fields, clears the selection in any select element, and resets all radio buttons and checkbox buttons to non-selected states.
Chainable: Yes.
Code:
$('#myFormId').clearForm();
clearFields
Clear field elements. It is convenient to use only when some form elements need to be cleared.
Chainable: Yes.
Code:
$('#myFormId .specialFields').clearFields();
Options object
Both ajaxForm and ajaxSubmit support a number of option parameters, which can be provided using an Options object. Options is just a JavaScript object, which contains the following collection of attributes and values:
target
Specifies the element in the page that is updated by the server response. The value of an element may be specified as a jQuery selector string, a jQuery object, or a DOM element.
Default value: null.
url
Specifies the URL to submit the form data.
Default value: The action attribute value of the form
type
Specifies the method for submitting form data: "GET" or "POST".
Default value: The method attribute value of the form (default is "GET" if not found).
beforeSubmit
A callback function called before the form is submitted. The "beforeSubmit" callback function is provided as a hook to run pre-submit logic or to verify form data. If the "beforeSubmit" callback function returns false, the form will not be submitted. The "beforeSubmit" callback function takes three call parameters: form data in array form, jQuery form object, and Options object passed into ajaxForm/ajaxSubmit. The form array accepts data in the following ways:
Code:
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
Default value: null
success
The callback function called after the form is successfully submitted. If the "success" callback function is provided, it is called when the response is returned from the server. Then the dataType option value determines whether to pass back responseText or responseXML value.
Default value: null
dataType
The expected return type of data. One of null, "xml", "script" or "json". dataType provides a method that specifies how the server's response is handled. This is directly reflected in the method. The following values are supported:
'xml': If dataType == 'xml', the server response will be treated as XML. Meanwhile, if the "success" callback method is specified, the responseXML value will be passed back.
'json': If dataType == 'json', the server response will be evaluated and passed to the 'success' callback method if it is specified.
'script': If dataType == 'script', the server response will evaluate to plain text.
(Translator's note: Some of the above places are not clear, so I had to translate it intently, hoping to express the original meaning.)
Default value: null (the server returns the responseText value)
semantic
Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".
Boolean flag indicates whether the data must be submitted strictly in semantic order (slower?). Note: Generally speaking, forms have been serialized (or serialized) in semantic order, except for the input element of type="image". If your server has strict semantic requirements and the form contains an input element with type="image" in it, you should set semantic to true. (Translator's note: This paragraph may not be understood, and the translation may not be meaningful, but please ask the expert to correct it.)
Default value: false
resetForm
Boolean flag indicating whether to reset if the form is submitted successfully.
Default value: null
clearForm
Boolean flag indicating whether form data is cleared if form submission is successful.
Default value: null
Example:
Code:
[/code]
// Prepare the Options object
var options = {
target: '#divToUpdate',
url: '',
success: function() {
alert('Thanks for your comment!');
} };
// Pass options to ajaxForm
$('#myForm').ajaxForm(options);
[/code]
Note: The Options object can also be used to pass values to jQuery's $.ajax method. If you are familiar with the options supported by $.ajax, you can use them to pass Options objects to ajaxForm and ajaxSubmit.