An analysis of skillfully using AJAX Beforesend to improve user experience _ajax related

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.

$.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:

$.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) {
   Consloe.info (" Error: "+data.responsetext);
}"
;

Simulate toast effect

Ajax requests the server to load the 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") {
     //...
   }
} ,
error:function () {
   console.info ("error:" +data.responsetext);
}
);

The above analysis skillfully with Ajax beforesend to improve the user experience is small to share all the content of everyone, hope to give you a reference, but also hope that we support the cloud habitat community.