In order to give users a better experience, our predecessors developed Ajax,
So how can we use ajax to give users the best experience,
Well, let's get started. This article is about how to give users a good feedback after Ajax is submitted. If the user does not respond after half a day, our program is already being executed. This will give a bad impression. If we give him some feedback, the effect will be different, obviously better. For example!
So what if such an image is loaded when Ajax is running? Of course there are many methods. I should paste the code.
Ajaxload. textload = function () {// text message $ ('. waiting '). show (); // here is a GIF loading image that I prepared in advance. The initial display is set to none. When I started running Ajax, I showed this image, the above var id = $ ('. grouplist Li. active '). ATTR ('id'); var content =$ ("# Content "). val (); $. ajax ({type: 'post', URL: 'group _ data. do ', datatype: 'json ',
Timeout: 5000, data: {"type": "sendtext", "group_id": ID, "content": Content}, success: function (data) {$ ('. waiting '). hide (); Data = JSON. parse (data ['result'] ['data']); If (data ['errcode'] = 45009) {$. confirm ({HTML: "You have reached the upper limit for sending Group messages this month! ", Buttons: {" OK ": function () {return ;}});} else if (data ['errcode'] = 1) {$. confirm ({HTML: "developed failed! ", Buttons: {" OK ": function () {return ;}});} else if (data ['errcode'] = 1) {$. confirm ({HTML: "developed successfully! ", Buttons: {" OK ": function () {return ;}}); loadtextmateriallistl () ;}}, complete: function (xhr, status) {// error callback is not used here. Why? Because we use complete, the callback function after the request is complete (called after the request is successful or fails ). $ ('. Waiting '). hide (); // when Ajax enters the complete callback, we can load the image hide just added. If (status = 'timeout ') {// if the request is equal to the set timeout time, execute the following code! $. Confirm ({HTML: "The request times out. Please try again later! "+ Status, buttons: {" OK ": function () {return ;}});} else if (status = 'error') {$. confirm ({HTML: "request error! "+ Status, buttons: {" OK ": function () {return ;}}});}}})};
Well, it's actually that simple. What are you waiting for? Try it yourself.
Ajax image loading, complete