在 Grails 中,使用 AJAX 调用时,可以在加载过程中显示一个 spinner.gif 图片。为了实现这个功能,可以在 GSP 页面中添加一个图片元素,并在 AJAX 请求开始时显示它,请求完成时隐藏它。
首先,在 GSP 页面中添加一个图片元素,如下所示:
<img id="spinner" src="${resource(dir: 'images', file: 'spinner.gif')}" style="display:none">
这个图片元素的 ID 是 "spinner",它的样式设置为 "display:none",这样它最初是隐藏的。
接下来,在 AJAX 请求开始时显示 spinner,请求完成时隐藏它。可以使用 jQuery 的 AJAX 方法来实现这个功能,如下所示:
$(document).ready(function() {
$('#myButton').click(function() {
$('#spinner').show(); // 显示 spinner
$.ajax({
url: '/myController/myAction',
type: 'POST',
data: {
// 请求参数
},
success: function(data) {
// 处理请求成功的情况
},
error: function(xhr, status, error) {
// 处理请求失败的情况
},
complete: function() {
$('#spinner').hide(); // 隐藏 spinner
}
});
});
});
在这个例子中,当用户点击 ID 为 "myButton" 的按钮时,会发送一个 AJAX 请求到 "/myController/myAction" 这个 URL。在请求开始时,会显示 ID 为 "spinner" 的图片元素。请求完成后,无论请求成功还是失败,都会隐藏 spinner。
需要注意的是,在 AJAX 请求中,可能会出现一些错误,例如网络错误、服务器错误等。因此,在处理请求失败的情况时,需要进行适当的错误处理,例如显示错误信息、重试请求等。
领取专属 10元无门槛券
手把手带您无忧上云