Ajax implements Loading effect

This time I will bring you the Loading effect of Ajax. What are the precautions for Ajax to realize the Loading effect? ​​The following is a practical case, let's take a look.

In the process of Ajax background data request, we sometimes hope that the user can know that the page background is still doing something. At this time, we need to give the user a very clear prompt, which is what we call

Progress bar

Implementation principle:

JqueryYou can set ajax globally to achieve Similar to the aspect-oriented effect in C#, that is, we can perform a series of operations on Ajax before and after the submission is completed, so we can display the Loading box when ajax starts, and when the ajax request is completed After that, close the loading box and basically achieve 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. To configure it, 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. It's 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 can't 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. 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 //动画类型
});
}
});
});

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of ajax php control function calling steps

Detailed explanation of the use of AJAX request queue

The above is the detailed content of Ajax implements Loading effect. For more information, please follow other related articles on the PHP Chinese website!