ajax请求 loading
时间: 2023-06-21 21:17:27 浏览: 72
您可以在Ajax请求开始时显示loading图标,以便用户知道请求正在进行中。您可以使用以下代码来实现这个功能:
```javascript
// 显示loading图标
$('#loading').show();
// 发送Ajax请求
$.ajax({
url: 'your-url',
type: 'GET',
data: {},
success: function(response) {
// 处理响应
},
error: function(xhr, status, error) {
// 处理错误
},
complete: function() {
// 隐藏loading图标
$('#loading').hide();
}
});
```
在这个例子中,我们使用jQuery来发送Ajax请求,并在请求开始时显示loading图标。当请求完成时,我们使用`complete`回调函数来隐藏loading图标。您可以将`#loading`替换为您想要显示loading图标的DOM元素。
相关问题
ajax请求加载动画
以下是使用jQuery实现ajax请求加载动画的示例代码:
```javascript
// 显示loading动画
function showLoad() {
// 在页面中添加一个loading的div
$('body').append('<div id="loading"><img src="loading.gif"/></div>');
// 设置loading的样式
$('#loading').css({
'position': 'fixed',
'top': '50%',
'left': '50%',
'margin-top': '-50px',
'margin-left': '-50px',
'z-index': '9999'
});
}
// 隐藏loading动画
function hideLoad() {
$('#loading').remove();
}
// 发送ajax请求
$.ajax({
url: 'your_url',
type: 'POST',
dataType: 'json',
beforeSend: function () {
showLoad(); // 发送请求之前显示loading动画
},
success: function (data) {
// 请求成功后的操作
},
complete: function () {
hideLoad(); // 请求完成后隐藏loading动画
}
});
```
layui使用ajax请求时添加loading事件等待接口返回
在使用 layui 发送 Ajax 请求时,可以通过 `beforeSend` 和 `complete` 事件来添加 loading 效果。
例如:
```javascript
// 发送 Ajax 请求前,显示 loading 效果
$.ajax({
url: "/api/example",
type: "POST",
data: { name: "example" },
dataType: "json",
beforeSend: function() {
// 显示 loading 效果
layer.load(2);
},
success: function(res) {
// 处理接口返回的数据
console.log(res);
},
complete: function() {
// 隐藏 loading 效果
layer.closeAll("loading");
}
});
```
其中 `layer.load(2)` 表示显示 loading 效果,数字 `2` 表示 loading 图标的样式,具体可参考 layui 官方文档。`layer.closeAll("loading")` 表示隐藏 loading 效果。
另外,如果需要在 Ajax 请求发生错误时也隐藏 loading 效果,可以在 `error` 回调函数中添加 `layer.closeAll("loading")`。