jquery Ajax form submission plugin jquery form usage

Html

First we load the jquery library and the Jquery.form.js plugin. Jquery.form.js Plugin's official website address: http://www.malsup.com/jquery/form/

The code is as follows	Copy Code
<script type= "Text/javascript" src= "Jquery.js" ></script> <script type= "Text/javascript" src= "Jquery.form.min.js" ></script>

Then, we add a simple form code to the body of the page:

code is as follows

copy code

<form id=" My_form "action=" submit.php "method=" POST ">      <p> Name: <input type= "text" name= "uname" id= "uname" class= "input" ></p>    <p > Sex: <input type= "Radio" name= "Sex" value= "1" checked> male <input type= "Radio"      name= " Sex "value=" 2 "> Female </p>    <p> Age: <input type=" text "Name=" ages "id=" age "class=" input "sty Le= "width:50px" ></p>    <p style= "margin-left:30px" ><input type= "Submit" class= "BTN" "Value= Submit" >    <span id= "msg" ></span></p> </form> <div id= " Output "></div>

form, you need to enter the name, gender, and age, and then submit to the submit.php process, usually, after clicking the "Submit" button, The page goes to submit.php to process the form data, and after we use the Jquery.form plugin, the page does not jump and completes an AJAX interaction directly.
Jquery

We conveniently invoke the Jquery.form plug-in, using Ajaxsubmit () to make the entire form's AJAX submission process very simple.

The code is as follows

Copy Code

$ (function () { var options = { Beforesubmit:showrequest,//Pre-submission processing Success:showresponse,//processing complete Resetform:true, DataType: ' JSON ' }; $ (' #my_form '). Submit (function () { $ (this). Ajaxsubmit (options); }); }); function Showrequest (FormData, Jqform, options) { var uname = $ ("#uname"). Val (); if (uname== "") { $ ("#msg"). HTML ("Name cannot be empty!") "); return false; } var age = $ ("#age"). Val (); if (age== "") { $ ("#msg"). HTML ("Age cannot be empty!") "); return false; } $ ("#msg"). HTML ("submitting ..."); return true; } function Showresponse (responsetext, statustext) { $ ("#msg"). HTML (' commit success '); var sex = responsetext.sex==1? " Male ":" Female "; $ ("#output"). HTML ("Name:" +responsetext.uname+ "Sex:" +sex+ "Age:" +responsetext.age); }

The code above completes the verification of the form submission and the processing after the submission. After the form data is submitted to submit.php, we can check the data by submit.php, write the data to the database, return the operation result and so on, the article no longer lists the code.
Ajaxsubmit () option setting

Ajaxsubmit () provides a rich set of options, and we make a list based on the probability size used for reference.

Property	Describe
Url	The AJAX request will be submitted to the URL, which defaults to the form's action attribute value
Type	Specifies the method that submits the form data: "Get" or "POST." Default value: The form's Method property value (if the default is "get" is not found).
DataType	The data type expected to be returned. NULL, "XML", "script", or "JSON" one of them. DataType provides a method that provides a way to handle the response of a server. This is directly reflected in the Jquery.httpdata method. The following values are supported: ' XML ': if datatype = = ' xml ', the server response will be treated as XML. Also, if the "success" callback method is specified, the Responsexml value is returned. ' JSON ': if datatype = = ' json ', the server response is evaluated and passed to the "success" callback method if it is specified. ' Script ': if datatype = = ' script ', the server response will be evaluated as plain text ... Default value: null (server returns RESPONSETEXT value)
Target	Indicates the element in the page that is updated by the server response. The value of an element may be specified as a jquery selector string, a jquery object, or a DOM element. Default value: null.
Beforesubmit	The callback function that was invoked before the form was submitted. The "Beforesubmit" callback function is provided as a hook (hook) to run the pre-submit logic or validate the form data. If the "Beforesubmit" callback function returns false, then the form will not be submitted. The "Beforesubmit" callback function takes three call parameters: Form data in array form, jquery Form object, and the options object in the incoming ajaxform/ajaxsubmit. Default value: null
Success	callback function that is invoked after a form has been successfully submitted. If a "success" callback function is provided, it is invoked when the response is returned from the server. The datatype option value is then determined to return the value of ResponseText or Responsexml. Default value: null
ClearForm	Indicates whether the form data is purged if the form submission succeeds. Default value: null
Resetform	Indicates whether the form submission succeeds if it is reset. Default value: null

The Jquery.form plug-in also provides Formtoarray (), Formserialize (), Fieldserialize (), Fieldvalue (), ClearForm (), Clearfields (), and Resetform () and other methods