jquery实现ajax进度条请求加载
时间: 2023-12-05 09:41:31 浏览: 58
以下是使用jQuery实现ajax进度条请求加载的示例代码:
```javascript
// 显示进度条
$(document).ajaxStart(function() {
$('.progressbar .bar').css('width', '5%');
$('.progressbar').fadeIn();
});
// 隐藏进度条
$(document).ajaxStop(function() {
$('.progressbar').fadeOut();
});
// 发送ajax请求
$.ajax({
url: 'your-url',
type: 'GET',
dataType: 'json',
success: function(data) {
// 请求成功后的处理
},
error: function(xhr, status, error) {
// 请求失败后的处理
},
xhr: function() {
var xhr = new window.XMLHttpRequest();
// 监听上传进度事件
xhr.upload.addEventListener('progress', function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
// 更新进度条
$('.progressbar .bar').css('width', percentComplete * 100 + '%');
}
}, false);
return xhr;
}
});
```