Configuration of Ajax global loading box (Loading effect)

This article mainly introduces the relevant information about the configuration of the Ajax global loading box (Loading effect). It is very good and has reference value. Friends in need can refer to

Background data request in Ajax During the process, we sometimes want the user to know that the page is still doing something in the background. At this time, we need to give the user a very clear prompt, which is what we call a progress bar

Implementation principle:

Jquery can globally set ajax to achieve an aspect-oriented effect similar to that in C#, that is, we can set it before Ajax is submitted and after the submission is completed. Perform a series of operations, so we can display the Loading box when ajax starts, and after the ajax request is completed, close the loading box, which basically achieves this effect perfectly.

The way for Jquery to globally configure Ajax is:

$.ajaxSetup({
beforeSend: function () {
//ajax请求之前
},
complete: function () {
//ajax请求完成，不管成功失败
},
error: function () {
//ajax请求失败
}
});

Of course, the configurations of beforeSend/complete/error can also be used in a single ajax. For configuration, write it in ajaxSetup and put it on the public page. It is global~

Finally, let me present the code. When I was doing it here, for the sake of convenience, I directly used the layer plug-in. To achieve the loading effect, we do not have to manually write css. After all, this is not our strength. Students who are capable can write the loading effect by themselves and use js to manually control its display and hiding. If you want to copy it directly, then Please introduce layer, portal: http://layer.layui.com/

One thing that needs to be explained here is that when there are multiple ajaxes at the same time, one may be loaded, and all the others will be lost. Turned off. For this, I can think of the following two solutions:

■My current solution is to let him open multiple ones (the coordinates are all the same and cannot be seen), and then turn them off Close whichever one ends. What I do here is to add an index parameter to ajaxSetup (this thing can only be written to the set object, otherwise all ajaxes still share the same one). With index, what should I do? Just play.

■There is another solution that is suitable for writing this control logic yourself. Only one loading box is displayed, and a parameter of how many ajaxes are currently executed is written on the loading box, similar to

, every time it starts or ends, maintain the value of ajax-cout, and judge when ajax ends, if the data-ajax-count is less than or equal to 0, It should be possible to hide p, but I have not practiced 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('部分数据加载失败，可能会导致页面显示异常，请刷新后重试', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //动画类型
});
}
});
});

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Loop scheme in Ajax

A brief discussion on Bootstrap's DatePicker date range selection

A simple example of using XPath in dom4j

The above is the detailed content of Configuration of Ajax global loading box (Loading effect). For more information, please follow other related articles on the PHP Chinese website!