JQuery uses the jquery. form. js plug-in to submit Form forms using AJAX. jquery. form. js
The jQuery Form plug-in has the following advantages:
1. Pre-Submission verification is supported.
2. callback after submission is supported.
3. Use AJAX for a good user experience
4. The submission method is flexible. You only need to specify the form ID to be submitted. You can submit the form if you want to submit the form. You can also submit the parameter configuration.
5. multiple types of data can be submitted, such as xml and json.
Main functions:
1. ajaxForm
Add all required event listeners to prepare for AJAX submission forms. The ajaxForm cannot be submitted. In the ready function of document, ajaxForm is used to prepare the AJAX submission form. AjaxForm accepts 0 or 1 parameters. This single parameter can be either a callback function or an Options object.
Instance:
$('#myFormId').ajaxForm();
2. ajaxSubmit
AJAX will submit the form immediately. In most cases, ajaxSubmit is called to respond to a user's submitted form. AjaxSubmit accepts 0 or 1 parameters. This single parameter can be either a callback function or an Options object.
Instance:
// Bind the form submission event handler
$ ('# myFormId'). submit (function () {
// submit Form
$ (this) .ajaxSubmit ();
// In order to prevent ordinary browsers from submitting the form and generating page navigation (prevent page refresh?) Return false
return false;
});
3. formSerialize
Serializes (or serializes) A form into a query string. This method returns a string in the following format: name1 = value1 & name2 = value2. This method returns a string.
Instance:
var queryString = $ ('# myFormId'). formSerialize ();
// Now you can use $ .get, $ .post, $ .ajax, etc. to submit data
$ .post ('myscript.php', queryString);
4. fieldSerialize
Serializes (or serializes) The form field elements into a query string. This is convenient when only some form fields need to be serialized (or serialized. This method returns a string in the following format: name1 = value1 & name2 = value2. This method returns a string.
Instance:
var queryString = $('#myFormId .specialFields').fieldSerialize();
5. fieldValue
Returns the value of the form element that matches the inserted array. From version 0.91, this method will always return data in the form of arrays. If the element value is determined to be invalid, the array is empty; otherwise, it contains one or more element values. This method returns an array.
Instance:
// Get password input value
var value = $ ('# myFormId: password'). fieldValue ();
alert ('The password is:' + value [0]);
6. resetForm
Restore the form to its initial state by calling the original DOM method of the form element.
Instance:
$('#myFormId').resetForm();
7. clearForm
Clear form elements. In this method, all text input fields, password input fields, and textarea fields are empty to clear the selected fields in any select element, and reset all the single-choice (radio) buttons and multiple-choice (checkbox) buttons to unselected states.
Instance:
$('#myFormId').clearForm();
8. clearFields
Clear the field element. Only some form elements need to be cleared.
Instance:
$('#myFormId .specialFields').clearFields();
Simple Example of jQuery Form plug-in:
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My Jquery</title> <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery-1.4.2.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery.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 $('#myForm').ajaxForm(function() { alert("Thank you for your comment!"); }); }); // attach handler to form's submit event $('#myFormId').submit(function() { // submit the form $(this).ajaxSubmit(); // return false to prevent normal browser submit and page navigation return false; }); </script> </head> <body> <form id="myForm" action="index.jsp" method="post"> Name: <input type="text" name="name" /> Comment:<textarea name="comment"></textarea> <input type="submit" value="Submit Comment" /> </form> </body> </html>
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
