The JQuery form plug-in's Ajaxform () and ajaxsubmit () optional Parameter item objects _jquery

The form Plugin API provides a number of useful ways to make it easy for you to work with the data in the form and the submission process for the form.

Test environment: A Web project deployed to Tomcat.

This article demonstrates the optional parameter item object for the JQuery form Plug-in ajaxform () and Ajaxsubmit ()

Optional parameter item object for Ajaxform () and Ajaxsubmit ()

Both Ajaxform and ajaxsubmit support a large number of optional parameters, which are passed in by an optional parameter item object. An optional parameter item object is just a simple JavaScript object that contains attributes and values:

Target

Replaces the contents of the specified page element with the contents returned by the server side. This value can be represented by 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 action of the form

Type

Form submit by way of ' get ' or ' POST '.
Default value: The value of the form's method (considered ' get ' if not specified)

Beforesubmit

The method that is executed before the form is submitted. This can be used before the form is submitted for preprocessing, or form validation. If the function specified by ' Beforesubmit ' returns false, the form is not committed. The ' beforesubmit ' function calls for 3 parameters: form data in the form of an array, form objects in the form of JQuery objects, and optional objects to be passed to the ajaxform/ajaxsubmit.

form data in the form of an array is in the following format: [{name: ' username ', value: ' Jresig '}, {name: ' Password ', value: ' Secret '}]

Default value: null

Success

A function that executes after the form is submitted. If the ' success ' callback function is specified, the method is executed when the server side returns a response to the form submission. The values of ResponseText and Responsexml are passed into this parameter (depending on the type of datatype).
Default value: null

DataType

Specifies the type of data returned by the server response. One of them: null, ' xml ', ' script ', or ' json '. This dataType option is used to indicate how you can handle the data returned by the server side. This is directly relative to the Jquery.httpdata method.

Here are the options you can use:

' xml ': if DataType = = ' xml ' The data returned by the server is treated as XML, in which case the callback function specified by ' Success ' will be passed into the Responsexml data

' JSON ': if DataType = = ' json ' The data returned by the server end will be executed and passed into the ' success ' callback function

' Script ': if DataType = = ' script ' The data returned by the server side will be executed in context

Default value: null

Semantic

A Boolean value that indicates whether the order of the data submitted by the table dropdowns needs to be in a strictly semantic order. The data for a general form is serialized in chapeau order, unless there is a type= "image" element in the form. This is only required if the form has to require strict order and type= "image" in the form.
Default value: False

Resetform

A Boolean value that indicates whether the form will need to be reset after it is submitted successfully.
Default value: null

ClearForm

A Boolean value that indicates whether the form will need to be emptied after it is submitted successfully.
Default value: null

Iframe

Boolean value that indicates whether the form needs to be submitted to an IFRAME. This is used in the form where a file field is to be uploaded. For more information, refer to the file uploads document in the Code sample page.
Default value: False

First, the introduction of 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

Second, write the page

<!--demo1--> <form id= "MyForm" action= "ajax2.jsp"
method= "POST" > 
name: <input type= "Text" name= "Name"/> <br/>
Add: <input type= "text" name= "address"/><br/> 
Self Introduction: <textarea name= " Comment "></textarea> <br/>
<input type=" Submit "id=" test "value=" submitted "/> <br/>
<div id= "OUTPUT1" ></div>
</form>

Third, call the method

<script type= "Text/javascript" > $ (document) Ready (function () {var options = {target: ' #output1 ',//data returned by server
Update the content with ID output1. Beforesubmit:showrequest,///Success:showresponse before submission///Other attributes://url:url//default is form action, if written, will overwrite from AC 
tion. Type:type//default is form method, and if it is written, it overwrites the method of from.
(' Get ' or ' post '). 
Datatype:null//' xml ', ' script ', or ' JSON ' (accept the type returned by the service side.)
Clearform:true///After successful submission, clears the values of all the form elements.
Resetform:true///After successful submission, resets the values of all the form elements. 
For some reason, the commit is stuck in an infinite wait, the timeout parameter is used to limit the time of the request,//When the request is greater than 3 seconds, the request is jumped out. 
timeout:3000};
' Ajaxform ' Way of the form. 
$ (' #myForm '). Ajaxform (options);
or ' ajaxsubmit ' manner of submission. 
$ (' #myForm '). Submit (function () {//$ (this). Ajaxsubmit (options); return false;
To prevent the browser from submitting. 
//}); 
}); Pre-commit function Showrequest (FormData, Jqform, Options) {//FormData is an array object, where we use the $.param () method to convert him to a string. var querystring = $.param (FormData); Assembly data, the plug-in will automatically submit data alert (querystring); 
Similar to: name=1&add=2 return true; //Submit Post function Showresponse (rEsponsetext, StatusText) {alert (' state: ' + statustext + ') \ n ' returns: \ n ' + responsetext);  } </script>

Four, detailed code:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >  

Create a new ajax2.jsp file:

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"
%> <% Request.setcharacterencoding ("UTF-8");//Prevent 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);
%>

Five, Test effect:

Fill in the data:

Submit the contents of the form:

Data returned from the server:

The above content is small to share the jquery form Plug-in ajaxform () and ajaxsubmit () optional parameter items of the entire description, I hope this article to share the help.