Shulou(Shulou.com)06/03 Report--

How to use Ajax beforeSend to improve the user experience, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

JQuery is an open source js framework that is often used, and there is a beforeSend method in the $.ajax request to perform some actions before sending the 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 the form, often due to the network or its reasons, the user clicks the submit button and mistakenly thinks that the operation is not successful, and then the operation of the submit button will be repeated. If the front-end code of the page does not do some corresponding processing, it will usually lead to multiple pieces of the same data inserted into the database, resulting in the increase of dirty data. To avoid this, disable the submit button in the beforeSend method in the $.ajax request until the Ajax request completes and restore the button's available state.

For example:

$.ajax ({type: "post", data:studentInfo,contentType: "application/json", url: "/ Home/Submit", beforeSend:function () {/ / disable button to prevent repeated submission of $("# submit). Attr ({disabled:" disabled "});}, success:function (data) {if (data==" Success ") {/ / clear input box clearBox () }, complete:function () {$("# submit") .removeAttr ("disabled");}, error:function (data) {consloe.info ("error:" + data.responseText);}})

Simulate Toast effect

Ajax prompts loading when requesting the server to load the data list ("loading, please wait a moment")

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);}}); after reading the above, have you mastered how to use Ajax's beforeSend to improve the user experience? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.