Using AJAX Beforesend to improve user experience

jquery is an open-source JS framework that is often used, where the $.AJAX request has a Beforesend method that performs some action before sending a request to the server.
For details, refer to the official jquery document: http://api.jquery.com/Ajax_Events/

1 $.ajax ({2     function() {3      ///  Handle the Beforesend Event4    },5     function() {6      // Handle The Complete event 7     }8     //  ... 9 });

Prevent duplicate data

In the actual project development, the submission of the form is often due to the network or its reasons, the user click the Submit button mistakenly believe that they did not succeed, and then repeat the button operation times, if the page front-end code does not do some corresponding processing, often lead to many of the same data inserted into the database, resulting in increased dirty data. To avoid this behavior, disable the Commit button in the Beforesend method in the $.ajax request and wait until the AJAX request is complete and the recovery button is available.

As an example:

1 //submit form data to background processing2 $.ajax ({3Type: "POST",4 Data:studentinfo,5ContentType: "Application/json",6URL: "/home/submit",7Beforesend:function () {8         //Disable buttons to prevent duplicate submissions9$ ("#submit"). attr ({disabled: "Disabled") });Ten     }, OneSuccessfunction(data) { A         if(data = "Success")) { -             //Empty the input box - Clearbox (); the         } -     }, -Completefunction () { -$ ("#submit"). Removeattr ("Disabled")); +     }, -Errorfunction(data) { +Console.info ("Error:" +data.responsetext); A     } at});

Simulate toast effects

The AJAX request server loads the data list when prompted loading ("load, please later ..."),

1 $.ajax ({2Type: "POST",3ContentType: "Application/json",4URL: "/home/getlist",5Beforesend:function () {6$ ("Loading"). Show ();7     },8Successfunction(data) {9         if(data = "Success")) {Ten             // ... One         } A     }, -Completefunction () { -$ ("Loading"). Hide (); the     }, -Errorfunction(data) { -Console.info ("Error:" +data.responsetext); -     } +});

Using AJAX Beforesend to improve user experience