Ajax Global Load box (loading effect) configuration _ajax related

In the process of AJAX background data request, we sometimes want users to know that the background is still doing some things, this time we need to give the user a very clear hint, which is what we call the progress bar

Implementation principle:

jquery can set the global setting of Ajax to implement the aspect-oriented effect of C #, that is, we can do a series of operations before and after the AJAX submission, so we can display the loading box at the beginning of Ajax, After the AJAX request completes, the loading box closes, basically achieves this effect perfectly.

jquery globally configures Ajax in the following ways:

$.ajaxsetup ({
beforesend:function () {
//ajax request
},
complete:function () {
//ajax request completed, regardless of successful failure
},
error:function () {
//ajax request failed
}
});

Of course, beforesend/complete/error these configurations in a single Ajax can also be configured, write him in Ajaxsetup, and put on the public page, he is the global ~

Finally, the code, I am doing here, in order to facilitate, directly using the layer this plug-in to achieve loading effect, and did not manually to write CSS after all this is not my strength ~ The ability of students can write their own this loading effect, Use JS to manually control its display hidden way to achieve ~ if you want to direct copy, then please introduce layer, transfer door: http://layer.layui.com/

One thing to note here is that when there are multiple Ajax at the same time, it is possible to load up and turn off everything else, for which I can think of two solutions:

My current solution is to have him open multiple (coordinates are the same, do not see), and then close the time which is closed to which, my approach here is to add a index parameter to the Ajaxsetup (this thing can only write to set the object inside, otherwise or all Ajax share the same), With index, you should play all the way.

There is also a solution for writing this control logic yourself, showing only a loading box, and writing a load box on how much Ajax is currently executing in a parameter similar to <div data-ajax-count= ' 0 ' ></div> , to maintain the value of ajax-cout, and at the end of Ajax to judge, if this data-ajax-count is less than 0, the Div hidden, should also be possible, this approach I did not practice.

$ (function () {
$.ajaxsetup ({
layerindex:-1,
beforesend:function () {
this.layerindex = layer.load (0 , {shade: [0.5, ' #393D49 ']};
},
complete:function () {
layer.close (this.layerindex);
},
error: function () {
Layer.alert (' Partial data loading failed, may cause the page to display an exception, please refresh and retry ', {
skin: ' Layui-layer-molv '
, closebtn:0
, Shift:4//animation type
});
}
;

The above is a small set to introduce the AJAX Global loading box (loading effect) of the configuration of the entire description, hope to be helpful to everyone, if you have any questions, welcome to my message, small series will promptly reply to everyone, here also thank you for the cloud Habitat Community website support!