使用 Ajax 在等待服务器端代码时显示加载器 [英] Showing a loader while waiting for server-side code with Ajax
问题描述
我的问题在 在等待服务器端代码时显示加载器(没有空白页).
简单总结一下，我想在完成服务器端作业之前显示加载器:[Loader] ->[目标页面].但是，HTML 是在服务器端作业之后加载的，因此我可以在空白页面之后看到加载器:[Blank page] ->[装载机] ->[目标页面].
非常感谢有人推荐使用ajax.不过我对ajax系统不是很熟悉...于是搜索了相关资料，写了如下代码.
HTML 代码 (sample.html),
<!-- 加载图片--><div id="正在加载"><img id="加载图片";src="/img/loading.gif";alt=正在加载..."/><section id="内容"><span th:text="${data_list}"></span></节><script type="text/javascript">var $loading = $('#loading').hide();$(文件).ajaxStart(函数(){$loading.show();}).ajaxStop(函数(){$loading.hide();});$.ajax({网址:/数据发送"，类型:POST"，}).完成(功能(片段){});
和 JAVA 代码(Controller.java).
@RequestMapping(method = RequestMethod.GET, path = "sample")字符串加载样本(模型模型){返回样品"；}@RequestMapping(method = RequestMethod.POST, value = "/dataSend")字符串发送数据(模型模型){model.addAttribute(data_list", service.getAllData());返回样本::#内容"；}我现在卡住了...谁能帮我修复代码，或者给我一些相关的例子...?
感谢阅读！
这样的事情可以解决您的问题:
My problem was described in Showing a loader while waiting for server-side code (without a blank page).
To summarize briefly, I want to show the loader before completing server-side jobs: [Loader] -> [Target page]. However, HTML was loaded after the server-side jobs, so I could see the loader after a blank page: [Blank page] -> [Loader] -> [Target page].
Very thankfully someone recommended using ajax. However, I am not familiar with ajax system... so I searched related information and wrote codes as below.
HTML code (sample.html),
<body>
<!-- loading image -->
<div id="loading">
<img id="loading-image" src="/img/loading.gif" alt="Loading..."/>
</div>
<section id="content">
<span th:text="${data_list}"></span>
</section>
<script type="text/javascript">
var $loading = $('#loading').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
$.ajax({
url: "/dataSend",
type:"POST",
}).done(function (fragment) {
});
</script>
and JAVA code (Controller.java).
@RequestMapping( method = RequestMethod.GET, path = "sample")
String loadSample(Model model) {
return "sample";
}
@RequestMapping(method = RequestMethod.POST, value = "/dataSend")
String sendData(Model model) {
model.addAttribute("data_list", service.getAllData());
return "sample :: #content";
}
I'm stuck now... could anyone help me fix the code, or give me some related examples...?
Thanks for reading!
Something like this would solve your issue:
<script type="text/javascript">
var $loading = $('#loading').show();
$.ajax({
url: "/dataSend",
type:"POST",
}).done(function(fragment) {
$('#loading').hide();
});
</script>
这篇关于使用 Ajax 在等待服务器端代码时显示加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
