Jquery form is a very good ajax form submission plug-in. Today I will introduce you to the application example of jquery form's ajaxSubmit (), hoping to help you.
HTML
First, we load the jquery library and jquery. form. js plug-in. Jquery. form. js plug-in 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 page body:
The 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> Gender: <input type = "radio" name = "sex" value = "1" checked> male <input type = "radio" Name = "sex" value = "2"> female </p> <P> age: <input type = "text" name = "age" id = "age" class = "input" style = "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> |
In the form, you must enter the name, gender, and age, and then submit it to submit. php processing. Normally, after you click "submit", the page will go to submit. php processes form data, and we use jquery. after the form plug-in, the page does not jump, and an ajax interaction is directly completed.
JQuery
We can easily call the jquery. form plug-in and use ajaxSubmit () to make the ajax submission process of the entire form very simple.
The Code is as follows: |
Copy code |
$ (Function (){ Var options = { BeforeSubmit: showRequest, // pre-submission Success: showResponse, // processing completed ResetForm: true, DataType: 'json' };
$ ('# My_form'). submit (function (){ $ (This). ajaxSubmit (options ); }); }); Function showRequest (formData, jqForm, options ){ Var uname = $ ("# uname"). val (); If (uname = ""){ $ ("# Msg" cmd.html ("name cannot be blank! "); Return false; }
Var age = $ ("# age"). val (); If (age = ""){ $ ("# Msg" 2.16.html ("Age cannot be blank! "); Return false; } $ ("# Msg" cmd.html ("submitting ...");
Return true; }
Function showResponse (responseText, statusText ){ $ ("# Msg" cmd.html ('submitted successfully '); Var sex = responseText. sex = 1? "Male": "female "; $ ("# Output" ).html ("name:" + responseText. uname + "Gender:" + sex + "age:" + responseText. age ); } |
The code above completes the verification before the form is submitted and the processing after the form is submitted. After the form data is submitted to submit. php, we can use submit. php to check the data, write the data to the database, and return the operation results. This article will not list the code.
Set the ajaxSubmit () Option
AjaxSubmit () provides a wide range of options. We will list the options based on the likelihood of use for your reference.
Attribute |
Description |
Url |
The Ajax request is to be submitted to this url. The default value is the action attribute value of the form. |
Type |
Method used to submit form data: "GET" or "POST ". Default Value: The method property value of the form (if not found, the default value is "GET "). |
DataType |
Expected data type. Null, xml, script, or json. DataType provides a method that specifies how to process server responses. This is directly reflected in the jQuery. httpData method. The following values are supported: 'Xml': If dataType = 'xml', the server response is treated as xml. If the "success" Callback method is specified, the responseXML value is returned. 'Json': If ype = 'json', the server response will be evaluated and passed to the "success" Callback method if it is specified .. 'Script': If dataType = 'script', the server response value is plain text .. Default Value: null (responseText value returned by the server) |
Target |
Specifies the elements on the page that are updated by the server response. The element value may be specified as a jQuery selector string, A jQuery object, or a DOM element. Default Value: null. |
BeforeSubmit |
The callback function called before the form is submitted. The "beforeSubmit" callback function is provided as a hook to run the pre-commit logic or verify the form data. If the "beforeSubmit" callback function returns false, the form will not be submitted. The "beforeSubmit" callback function has three call parameters: form data in array form, jQuery form object, and Options object passed into ajaxForm/ajaxSubmit. Default Value: null |
Success |
Callback Function called after the form is successfully submitted. If the "success" callback function is provided, it is called when the slave server returns a response. The value of the dataType option determines whether to return the value of responseText or responseXML. Default Value: null |
ClearForm |
Indicates whether to clear the form data if the form is submitted successfully. Default Value: null |
ResetForm |
Indicates whether to reset the form if it is submitted successfully. Default Value: null |
The jquery. form plugin also provides formToArray (), formSerialize (), fieldSerialize (), fieldValue (), clearForm (), clearFields (), and resetForm () methods.