[JQuery basic learning] 07 jQuery Form plug-in-form, jquery-Form

Source: Internet
Author: User

[JQuery basic learning] 07 jQuery Form plug-in-form, jquery-Form

Purpose: The jQuery Form plug-in is used to easily submit a Form in ajax mode, so that the page does not need to be refreshed when submitting the Form.

Its core methods are ajaxForm () and ajaxSubmit ()

It is easy to upgrade the form submission method. You do not need to change the HTML structure as follows:

// It is as simple as $ ("# myForm "). ajaxForm (function () {// operation after successful submission}); // You can also do this $ ("# myform "). submit (function () {$ (this ). ajaxSubmit (function () {// operation after successful submission}); return false; // prevent default submission of forms });

When submitting a form, you can not only pass a callback function to ajaxForm and ajaxSubmit as in the preceding example, but also pass an options object.

An options is defined as follows:

Var options = {target: "# output1", // put the content returned by the server into the element with id output1 beforeSubmit: function (formData, jqForm, options) {// The callback function before submission // formData is an array object, that is, the submitted data // jqForm is a jQuery object, the encapsulated form Element // options is the options object // In this callback function, returning false will prevent form submission} success: function (responseText, statusText, xhr, $ form) {// The submitted callback function // statusText is the returned status, with values success and error. // responseText carries the data returned by the server. // The content in the corresponding format will be returned Based on the datatype type // For the default value: the returned is the responseXML attribute of the XMLHttpRequest object}, url: url, // The form action by default, if it is declared, url type: type is used. // The method (post or get) with the default form is used. If it is declared, the Data type returned by dataType: null is overwritten. // clearForm: true, // after successful submission, clear the value resetForm: true for all form elements. // after successful submission, reset the value timeout of all form elements: 3000 // restrict the request timeout time, more than 3 seconds, jump out of the Request} $ ("myForm "). ajaxForm (options );

 

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.