JQuery Form plug-ins----The use of the Ajaxform () and Ajaxsubmit () methods

We usually use jquery to submit forms asynchronously, typically in submit (), using $.ajax. Like what:

$ (function() {

$ ("#form1"). Submit (function() {

$.ajax ({

Url:url,

Data: $ ("#form1"). Serialize (),

dataType: "JSON",  

Success: function(data) {

alert (data);}

});

});

});

This way masks the function of the form, making it a disguised Ajax, The following is a look at the Ajaxform and Ajaxsubmit () that conform to the form's thinking.

Ajaxform

Ajaxform () cannot submit the form , and in the Ready function of document, use Ajaxform to prepare the form for the AJAX submission. A ajaxform accepts 0 or 1 parameters. This single parameter can be either a callback function or an options object.

Ajaxform () applies a form-by-case approach to Ajax technology, with Ajaxform not having to get the value of each form's properties one by one, or to pass the data through URL rewriting after the request path. Ajaxform () automatically collects the value of each property in the current form and submits it to the destination URL as a form submission. submitting data in this way is more secure and simpler.

Instance:

Ajaxsubmit

The form is immediately submitted by Ajax, and in most cases is called ajaxsubmit to respond to the user submitting the form. A ajaxsubmit accepts 0 or 1 parameters. This single parameter can be either a callback function or an options object.

Ajaxsubmit () is suitable for submitting a form (a hyperlink, a picture's Click event) in the event mechanism, which is similar to Ajaxform, but it is more flexible. You only need to specify the action, you do not need to provide the submit () button.

Instance:

The following code, when triggered by the Click event, submits the path to the form action by means of the Ajaxsubmit () method.

Options Object

Both Ajaxform and Ajaxsubmit support a wide range of option parameters, which can be provided using an options object. The options is just a JavaScript object that contains a collection of properties and values as follows:

Target-Indicates the element in the page that is updated by the server response.

URL--Specifies the URL that submits the form data. (Default: The Action property value of the form)

Type--Specifies the method for submitting the form data. (Default: The Method property value of the form)

Beforesubmit-A callback function called before the form is submitted, which is provided to run the pre-commit logic or to validate the form data. If the "Beforesubmit" callback function returns false, the form is not committed. The "Beforesubmit" callback function takes 3 invocation parameters: (1, form data 2 as an array, jquery Form object 3, Options object in the incoming ajaxform/ajaxsubmit).

(default value: null)

Success-callback function called after the form has been successfully committed. If the "Success" callback function is provided, it is called when the response is returned from the server. It is then determined by the DataType option value to return ResponseText or Responsexml. ( default value: null)

DataType--The type of data expected to be returned. NULL, "XML", "script", or "JSON". Default value: null (server returns RESPONSETEXT value)

Instance:

------------------------------------------------------------------the Following is the detailed test code:-------------------------- ------------------------------------

1, Introduce JS

<script src= "Jquery-1.3.1.js" type= "Text/javascript" ></script>

<script src= "Jquery.form.js" type= "Text/javascript" ></script>

2. Write the page

<!--demo1--<form id= "Form1" 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" ></form>

3. New ajax2.jsp

1<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "2pageencoding= "UTF-8"%>3<%4Request.setcharacterencoding ("UTF-8");//Prevent garbled characters5String name = Request.getparameter ("name");6String address = Request.getparameter ("Address");7String comment = request.getparameter ("comment");8System.out.println (name+ "-" +address + "-" +comment);9OUT.PRINTLN (name + "+ address +" "+" +comment);Ten%>

4. Call method

<script type= "Text/javascript" >$ (document). Ready (Funcion () {var options= {
Beforesubmit:showrequest,//before submissionSuccess:showresponse,//after submission//some additional properties//Url:url//The default is the action of the form, which overwrites the action of the form if it is written .//Type:type//The default is the method of form, if written, will overwrite the method of the form//Datatype:null//' xml ', ' script ', or ' json ' (the type returned by the receiving server.)//clearform:true//Clear FormResetform:true //Resetting the form};
　　　　//Ajaxform Way to submit$ ("Form1"). Ajaxform (options); //or the Ajaxsubmit way of submission//$ ("Form1"). Submit (function () {//$ (　　　　 This ). Ajaxsubmit (options); //　　　　　　return false; //to prevent browser submissions//});}); //before submissionfunction Showrequest (FormData, Jqform, options) {//Formdata is an array object, and here we use the $.param () method to convert him to a string.var queryString= $.param (FormData);//assembly data, the plugin will automatically submit dataalert (queryString);//similar: name=1&address=2 　　　　 return true; }//after submissionfunction Showresponse (responsetext, statustext) {alert ("Status"+ StatusText +"\ nthe contents returned \ n"+responsetext)}</script>

5. Test results

Input data:

--------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------

Submit the contents of the form:

--------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------

Data returned from the server:

JQuery Form plug-ins----The use of the Ajaxform () and Ajaxsubmit () methods