Based on jquery using AJAX to submit form forms _javascript techniques via jQuery.form.js plug-ins

When we submitted the form, if you do not use AJAX submission, the page will refresh itself, it is very unfriendly, so we need to change our form submission to Ajax mode, so that users can clearly know when they submit the form at which stage: is being submitted? Submitted successfully?

I've simply used the JQuery form plug-in for a few advantages:

1. Support Pre-submission verification.

2. Support the callback after submission.

3. Ajax approach, with a very good user experience

4. The presentation is flexible. Just specify the form ID you want to submit. You want to submit that form. The submit parameters are configurable at the same time.

5. Support the submission of multiple types of data, such as: Xml,json.

The main function:

1.ajaxForm

Add all the event listeners you need to prepare your form for AJAX submission. Ajaxform cannot submit a form. In the ready function of document, use Ajaxform to prepare the form for AJAX submission. Ajaxform accepts 0 or 1 parameters. This single parameter can be either a callback function or a options object.

Instance:

$ (' #myFormId '). Ajaxform ();

2.ajaxSubmit

Immediately submit the form by Ajax. In most cases, you call Ajaxsubmit to respond to a user submitting a form. Ajaxsubmit accepts 0 or 1 parameters. This single parameter can be either a callback function or a options object.

Instance:

Bind form Submit Event Processor
$ (' #myFormId '). Submit (function () {
//Submit Form
$ (this). Ajaxsubmit ();
In order to prevent the normal browser from making form submission and generating page navigation (<span style= "color: #333333;" ><a href= "Http://www.100sucai.com/web/jquerytexiao/huandengpian" target= "_blank ><span" COLOR: # 333333; " > prevent page refresh </span></a></span>? Returns false return
false;
});

3.formSerialize

Serialize (or serialize) the form into a single 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

Serialize (or serialize) the field elements of the form into a single query string. This is handy when only a subset of the form fields need to be serialized (or serializable). 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 form element values that match the inserted array. From version 0.91, the method will always return data as an array. If the element value is determined to be invalid, the array is empty, otherwise it will contain one or more element values. The method returns an array.

Instance:

Get password input value
var value = $ (' #myFormId:p assword '). Fieldvalue (); 
Alert (' The password is: ' + value[0]);

6.resetForm

Restores the form to its original state by invoking the original Dom method of the form element.
Instance:

$ (' #myFormId '). Resetform ();

7.clearForm

Clears the form element. The method password all text input fields, password () input fields, and text area (textarea) fields, clearing the selection in any SELECT element. and resets all radio (radio) and multiple-selection (checkbox) buttons to an unselected state.

Instance:

$ (' #myFormId '). ClearForm ();

8.clearFields

Clears the field element. It is only convenient to use if some form elements need to be cleared.

Instance:

$ (' #myFormId. Specialfields '). Clearfields ();

A simple example of the JQuery form plug-in:

<%@ page language= "java" pageencoding= "UTF-8"%> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >  

This article details the jquery through the JQuery.form.js plug-in using AJAX to submit form form, I hope you like.