Using the Ajaxsubmit () method to realize the callback function when the platform is rented form to submit form

Source: Internet
Author: User
Tags jquery library

/**WS Platform Rental Construction (Enterprise q:185 198 884)

  1. Background
    Recently in the work, you need to implement the web-side image upload to the FTP server function. Uploading a file is to use form form to submit data to the background to transfer the file stream, there is a problem: the background after processing the image upload function, the need to send back to the foreground whether to upload a successful status code, upload failed error message and upload a successful image URL. However, there is no way to implement a callback function if you submit it with a normal form form. Later, under the introduction of the small partners, it was found that the Ajaxsubmit () method could be used to implement this function.
  2. Introduction to the Ajaxsubmit () method
    (1) ajaxsubmit () dependent
    Ajaxsubmit () method is the jquery form form plug-in method, in order to use the plug-in, you can go directly to the official website http://jquery.malsup.com/form/download. When you use it, you need to introduce a jquery library and a form plugin on a JSP or HTML page.
    (2) Introduction to Ajaxsubmit () usage
    The Ajaxsubmit () method accepts 0 or 1 parameters, which can be either a callback function or an options object when it is a single parameter. callback function is relatively simple, the following main introduction to the use of options. The options object can set the following parameters:
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var options = {
    Target: ' #output1 ',//Put the contents returned by the server into an element with ID OUTPUT1
    Beforesubmit:showrequest,//Pre-commit callback function
    Success:showresponse,//post-commit callback function
    Url:url,//default is the action of form, and if declared, overrides
    Type:type,//default is the method of form, and if declared, overrides
    Datatype:json,//Accept the type returned by the server
    Clearform:true,//After successful commit, clears the values of all form elements
    Resetform:true,//After successful commit, resets the values of all form elements
    timeout:3000//Limit the request time, when the request is greater than 3 seconds, jump out of the request
    };
    In these parameters, the more commonly used is the pre-commit callback function Beforesubmit and the post-commit callback function success. Beforesubmit is primarily used to validate data before submitting a form. Example code:
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    function Validate (FormData, Jqform, options) {
    /
    In this case, the form elements need to be validated, and if the rules are not met,
    Returns false directly to prevent form submission.
    /
    var queryString = $.param (FormData); Assembly data
    return true;
    }
    This callback function has three parameters, Formdata is an array object, Jqform is a jquery object that encapsulates the elements of the form, and the options parameter is the Options object. In this callback function, the form will be allowed to commit as long as it does not return false, and if false, it will prevent the form from being submitted.
    Success is the post-commit callback function, with 4 parameters responsetext,statustext,xhr, and $form. Among them, the more commonly used is the first two. StatusText is just a return state, such as Success,error. ResponseText carries the data content returned by the server, which returns the content in the appropriate format based on the DataType property in the Options object you set.
  3. Ajaxsubmit () Method code example
    The following is a template used by the Ajaxsubmit () method.
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21st
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    $ (function () {
    var options = {
    Type: ' POST ',
    URL: ' Commit path ',
    Success:showresponse,
    DataType: ' JSON ',
    Error:function (XHR, status, err) {
    Alert ("Operation failed");
    }
    };
    $ ("# #Form名称"). Submit (function () {
    $ (this). Ajaxsubmit (options);
    return false; Prevent forms from being automatically submitted
    });
    });
    /**
      • Save operation
        */
        function Tosave () {
        $ ("#Form名称"). Submit ();
        }
        /**
      • After saving, execute callback
      • @param responsetext
      • @param statustext
      • @param xhr
      • @param $form
        */
        function Showresponse (responsetext, StatusText, XHR, $form) {
        if (responsetext.status = = "0") {
        /**
      • Action after a successful request
        */
        alert (responsetext.msg);
        } else {
        alert (responsetext.msg);
        }
        }

Using the Ajaxsubmit () method to realize the callback function when the platform is rented form to submit form

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.