Ajax 글로벌 로딩 박스 구성(로딩 효과)

이 글은 Ajax 글로벌 로딩 박스 구성(로딩 효과)에 대한 관련 정보를 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 필요한 친구들이 참고할 수 있습니다.

Ajax가 백그라운드 데이터를 요청하는 과정에서, 때때로 우리는 페이지 배경이 여전히 뭔가를 하고 있다는 것을 사용자가 알 수 있기를 바랍니다. 이때 우리는 진행률 표시줄이라고 부르는 매우 명확한 프롬프트를 제공해야 합니다. 구현 원칙:

Jquery는 전역 Ajax 설정을 수행하여 C#과 유사한 측면 지향 효과를 얻을 수 있습니다. 즉, 제출 전과 제출이 완료된 후에 Ajax에서 일련의 작업을 수행할 수 있으므로 Ajax가 실행될 때 로딩 상자를 표시할 수 있습니다. Ajax 요청이 완료된 후 로딩 상자를 닫으면 기본적으로 이 효과가 완벽하게 달성됩니다.

Jquery에서 Ajax를 전역적으로 구성하는 방법은 다음과 같습니다.

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

여기 설명해야 할 한 가지는 동시에 여러 개의 Ajax가 있을 때 하나는 로드되고 다른 하나는 꺼질 수 있다는 것입니다. 이를 위해 다음을 생각할 수 있습니다. 두 가지 해결 방법:

■현재 해결 방법은 여러 개의 항목을 열게 한 다음(좌표는 모두 동일하고 볼 수 없음) 끝 중 하나를 닫는 것입니다. 여기서 내가 하는 일은 ajaxSetup에 인덱스 매개 변수를 추가하는 것입니다. 이것은 set 객체에만 기록될 수 있습니다. 그렇지 않으면 모든 ajax가 여전히 동일한 객체를 공유합니다. index를 사용하면 원하는 것은 무엇이든 재생할 수 있습니다.

■ 이 제어 로직을 직접 작성하기에 적합한 또 다른 솔루션이 있습니다. 하나의 로딩 상자만 표시되며

$(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 //动画类型
});
}
});
});

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

Bootstrap의 DatePicker 날짜 범위 선택에 대한 간단한 토론

dom4j에서 XPath를 사용하는 간단한 예

위 내용은 Ajax 글로벌 로딩 박스 구성(로딩 효과)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!