Use ajax to submit form _ javascript Based on jQuery. form. js plug-in-js tutorial

The jQueryForm plug-in allows you to easily submit Form forms using AJAX. The main methods are ajaxForm and ajaxSubmit, which are used to collect information about Form elements and manage the submission process. These two methods are configurable, allowing you to fully control Form submission. This article introduces how to use jQuery. form. the js plug-in uses ajax to submit form. If you need a form, you can refer to the following: when submitting the form, if you do not use ajax to submit the form, the page will be refreshed by yourself, which is very unfriendly, therefore, we need to change our form submission to the ajax mode, so that users can clearly know which stage they are at when submitting the form: submitting? Submitted successfully?

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 processor $ ('# myFormId '). submit (function () {// submit the form $ (this ). ajaxSubmit (); // to prevent normal browsers from submitting forms and generating page navigation (to prevent page refreshing ?) Returns falsereturn 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 (); // you can use $. get, $. post, $. ajax and so on 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:

// Obtain The 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" %>  My Jquery