JQuery. Form. js usage Example Analysis (with demo sample source code) _ jQuery

This article mainly introduces jQuery plug-in. form. js usage, combined with the instance form analysis of jQuery. form. js usage tips and related precautions. For more information about jQuery plug-in, see the following example. form. js usage. We will share this with you for your reference. The details are as follows:

I. jQuery. Form. js plug-in implements Ajax submission forms.

Method:

1. formSerilize () is used to serialize the data in the form and automatically organize it into the URL address format suitable for AJAX asynchronous requests.

2. clearForm () clears all input values in the form.

3. restForm resets all fields in the form. Restores all fields in the form to the default value when the page is loaded.

Question: What is the difference between ajaxForm () and ajaxSubmit:

Answer: $ ("# form1"). ajaxForm (); equivalent to the following two rows:

$("#form1".submit)(function(){ $("#form1").ajaxSubmit();return false;})

That is to say, ajaxFrom () will automatically block form submission. While ajaxSubmit () does not automatically block form submission. To prevent form submission, you must return false;

Tip 1: If you do not want to jump after the form is submitted, a simple line of code can be implemented, almost the same as not using form submission:

$ ("# MailForm"). ajaxSubmit (function (message) {alert ("the form has been submitted successfully! ");});

Note:: Either ajaxForm () or ajaxForm () can have no or accept one parameter. This parameter can be either a callback function or an options object. This object is very powerful and is described as follows:

Var options = {url: url, // type: type of the data submitted by form, // method of submission (method: post/get) target: target, // The response data returned by the server is displayed on the element (Id) to determine beforeSubmit: function (), // The callback function success: function () executed before submission (), // The callback function dataType: null executed after the submission is successful, // The server returns the Data Type clearForm: true, // whether to clear the field value in the form after the submission is successful restForm: true, // whether to reset the field value in the form after the submission is successful, that is, restore to the status timeout: 6000 when loading the page. // set the request time. After this time is exceeded, the request is automatically exited, unit: milliseconds ).}

Example:

Page js Code: