Skillfully using AJAX Beforesend to improve the user experience

jquery is a frequently used open source JS framework in which the $.AJAX request has a Beforesend method that performs some action before sending a request to the server.
Detailed reference to the jquery Official document: http://api.jquery.com/Ajax_Events/

$.ajax ({
    beforesend:function () {
     //Handle the Beforesend event
    },
    complete:function () {
     // Handle the Complete Event
    }
    //...
};

Prevent duplicate data

In the actual project development, when submitting a form often because of the network or its reasons, the user clicks the Submit button mistakenly believe that he did not operate successfully, and then repeated the operation of the button, if the page front-end code does not do some corresponding processing, will often lead to many of the same data into the database, resulting in increased dirty data. To avoid this, disable the Submit button in the Beforesend method in the $.ajax request, and wait until the AJAX request is finished, in the available state of the Restore button.

As an example:

Submit form data to background processing
$.ajax ({
    type: Post,
    data:studentinfo,
    contentType: "Application/json",
    URL: "/home/submit",
    beforesend:function () {
        //disable button prevents duplicate commit
        $ ("#submit"). attr ({disabled: "disabled"});
    ,
    success:function (data) {
        if (data = = "Success") {
            //Empty input box
            clearbox ();
        }
    },
    Complete:function () {
        $ ("#submit"). Removeattr ("Disabled");
    },
    error:function (data) {
        Console.info ("Error:" + data.responsetext);
    }
);

Simulate toast effect

Ajax requests the server to load a list of data when prompted loading ("in load, please later ..."),

$.ajax ({
    type: "Post",
    ContentType: "Application/json",
    URL: "/home/getlist",
    beforesend:function () {
        $ ("Loading"). Show ();
    },
    success:function (data) {
        if (data = = "Success") {
            //...
        }
    } ,
    complete:function () {
        $ ("Loading"). Hide ();
    },
    error:function (data) {
        Console.info (" Error: "+ data.responsetext);
    }"
;

Turn from: http://www.cnblogs.com/fanyong/p/3883670.html