Use of the jQuery form plug-in -- optional parameter object of ajaxForm () and ajaxSubmit (), jquery -- ajaxform

Use of the jQuery form plug-in -- optional parameter object of ajaxForm () and ajaxSubmit (), jquery -- ajaxform

The Form Plugin API provides many useful methods for you to easily process the data and Form submission processes in the Form.

Test Environment: A web project deployed in Tomcat.

This document demonstrates the use of the jQuery form plug-in -- optional parameter object of ajaxForm () and ajaxSubmit ().

Optional parameter object for ajaxForm () and ajaxSubmit ()

Both ajaxForm and ajaxSubmit support a large number of optional parameters, which are passed in through the optional parameter item object. The optional parameter item object is a simple JavaScript Object, which contains some attributes and values:

Target

Replace the content of the specified page element with the content returned by the server. This value can be expressed using the jQuery selector, or a jQuery object, a DOM element.
Default Value: null

Url

The address of the Form submission.
Default Value: the value of the form action.

Type

Form submission method, 'get' or 'post '.
Default Value: the value of the form's method (if not specified, it is considered as 'get ')

BeforeSubmit

Method for executing a form before submission. This can be used for preprocessing before form submission or form verification. If the function specified by 'beforesubmit 'returns false, the form will not be submitted. The 'beforesubmit 'function requires three parameters: form data in array form, form object in jQuery form, and optional objects to be passed to ajaxForm/ajaxSubmit.

The form data in the array form is in the following format: [{name: 'username', value: 'jresig'}, {name: 'Password', value: 'secret'}]

Default Value: null

Success

The function that is executed after the form is submitted. If the 'success' callback function is specified, this method is executed when the server returns a response to the form submission. The values of responseText and responseXML will be passed into this parameter (this depends on the dataType type ).
Default Value: null

 

DataType

Specifies the data type returned by the server response. One of them is null, 'xml', 'script', or 'json'. This ype option is used to indicate how to process the data returned by the server. This corresponds directly to the jQuery. httpData method.

The following are available options:

'Xml': If dataType = 'xml', the data returned by the server is treated as xml. In this case, the callback function specified by 'success' will be passed in the responseXML data.

'Json': If dataType = 'json', the data returned by the server will be executed and uploaded to the 'success' callback function.

'Script': If dataType = 'script', the data returned by the server will be executed in the context.

Default Value: null

Semantic

A boolean value that indicates whether the order of submitted data in a form must strictly follow the semantic order. Generally, the data in a form is serialized in semantic order, unless there is a type = "image" element in the form. therefore, this parameter must be specified only when the form must be strictly ordered and the form must contain type = "image.
Default Value: false

ResetForm

Boolean value indicating whether to reset the form after submission is successful.
Default Value: null

 

ClearForm

Boolean value indicating whether to empty the form after submission is successful.
Default Value: null

Iframe

Boolean value, used to indicate whether the form needs to be submitted to an iframe. This is used when the file field in the form needs to be uploaded. For more information, see the File Uploads document on the sample code page.
Default Value: false

 

 

1. Introduce dependent js

 

<script src="jquery-1.3.1.js" type="text/javascript"></script><script src="jquery.form.js" type="text/javascript"></script>    

 

Network Disk download: https://yunpan.cn/crjzfmXqaTu9e access password e3bc

 

2. Compile the page

 

<! -- Demo1 --> <form id = "myForm" action = "ajax2.jsp" method = "post"> Name: <input type = "text" name = "name"/> <br/> address: <input type = "text" name = "address"/> <br/> self-introduction: <textarea name = "comment"> </textarea> <br/> <input type = "submit" id = "test" value = "submit"/> <br/> <div id = "output1"> </div> </form>

 

 

Iii. Call Methods

 

<Script type = "text/javascript"> $ (document ). ready (function () {var options = {target: '# output1', // update the content with the id output1 returned by the server. beforeSubmit: showRequest, // success: showResponse before submission, // after submission // other attributes: // url: url // form action by default, will overwrite the from action. // type: type // The default value is form's method. If it is written, it overwrites from's method. ('get' or 'post '). // dataType: null // 'xml', 'script', or 'json' (accept the type returned by the server .) // clearForm: true // after successful submission, clear the values of all form elements. resetForm: true // reset the values of all form elements after successful submission. // for some reason, the request is in infinite waiting state, and the timeout parameter is used to limit the request time. // when the request exceeds 3 seconds, the request jumps out. // timeout: 3000}; // form in the 'ajaxform' mode. $ ('# myForm '). ajaxForm (options); // or 'ajaxsubmit. // $ ('# myform '). submit (function () {// $ (this ). ajaxSubmit (options); // return false; // to prevent the browser from submitting. ///}) ;}); // before submission, function showRequest (formData, jqForm, options) {// formdata is an array object. Here, we use $. the param () method converts it to a string. var queryString = $. param (formData); // assemble the data. The plug-in automatically submits the data alert (queryString); // similar to: name = 1 & add = 2 return true ;} // after submission, function showResponse (responseText, statusText) {alert ('status: '+ statusText +' \ n returns: \ n' + responseText);} </script>

 

 

4. Detailed code:

 

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> 
 
Create an ajax2.jsp file:
 
<% @ Page language = "java" import = "java. util. * "pageEncoding =" UTF-8 "%> <% request. setCharacterEncoding ("UTF-8"); // prevents garbled! String name = request. getParameter ("name"); String address = request. getParameter ("address"); String comment = request. getParameter ("comment"); System. out. println (name + "-" + address + "-" + comment); out. println (name + "" + address + "" + comment); %>
 
 
V. Test results:
 
Enter data:

 
Content of the submitted Form:
 

Data returned from the server: