Jquery Ajax form submission plug-in jquery form usage

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.