Configuration of the Ajax global Loading box (Loading effect), ajaxloading

Configuration of the Ajax global Loading box (Loading effect), ajaxloading

In the process of Ajax background data requests, we sometimes want users to know that the page background is still doing something. At this time, we need to give users a very clear prompt, this is what we call a progress bar.

Implementation principle:

Jquery can perform global settings on ajax to achieve the effect similar to the aspect orientation in C #. That is, we can perform a series of operations on Ajax before and after submission, so we can display the Loading box at the beginning of ajax, and close the loading box after the ajax request is complete, basically achieving this effect perfectly.

Jquery configures Ajax globally:

$. AjaxSetup ({beforeSend: function () {// before ajax request}, complete: function () {// ajax request completed, no matter the request succeeds}, error: function () {// ajax request failed }});

Of course, the beforeSend/complete/error configurations can also be configured in a single ajax, written in ajaxSetup, and put on a public page, which is global ~

Finally, I provide the code. I used the layer plug-in to achieve the loading effect for convenience. I did not manually write css. After all, this is not my strength ~ Competent students can write the loading effect on their own, and use js to manually control its display and hiding methods to implement it ~ If you want to copy directly, introduce layer, portal: http://layer.layui.com/

One thing to note here is that when multiple ajax files exist at the same time, all the others may be closed after loading. For this, there are two possible solutions:

■ My current solution is to enable him to open multiple (the coordinates are the same and cannot be seen), and then turn it off when it is over, I am here to add an index parameter to ajaxSetup (this item can only be written to the set object, otherwise all ajax will share the same one), with the index, you can do whatever you want.

■ There is also a solution suitable for writing this control logic by yourself, displaying only one loading box, the number of parameters currently executed by ajax in the loading box is similar to <div data-ajax-count = '0'> </div>, maintain the ajax-cout value and judge when ajax ends. If the data-ajax-count is smaller than or equal to 0, it is also possible to hide the div, I have not implemented this method.

$ (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 ('loading part of the data may cause page display exceptions. Please refresh and try again ', {skin: 'layui-layer-molv', closeBtn: 0, shift: 4 // animation type });}});});

The above is a full description of the configuration of the Ajax global Loading box (Loading effect) introduced by the editor. I hope it will help you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner, and I would like to thank you for your support for the help House website!