我有这个 JSP,我在其中选择某些参数并点击“提交”按钮,单击““提交”后我正在调用如下 JavaScript 函数
<body>
<input type=button class="button" id = "submit" value="Evaluate"
onclick="JavaScript:return evaluateFunction()">
</body>
在
evaluateFunction()
中,我正在收集所有参数并在新的弹出窗口中调用新的Servlet,如下所示:
<script>
function evaluateFunction(){
var win = window.open('ConfirmEvaluate?parameters,'mywindow','width=600,height=500,titlebar=no')
}
</script>
现在的问题是
ConfirmEvaluate servlet
需要一些时间从数据库获取数据(根据输入的大小大约15-20秒)并在转发的JSP中显示数据(比如userdata.jsp
)
现在,当 Servlet 从数据库加载数据时,我想在 15-20 秒内显示加载 gif 或屏幕。
我该如何继续,任何帮助将不胜感激。
我已经在SO中遇到了一些类似的问题,但没有一个有具体的答案。
你必须使用AJAX。像您的示例中那样的 Servlet 请求是同步的。这意味着它将等到处理完成然后执行下一个活动。
使用 AJAX 请求,您可以发送请求,然后执行其他操作,而无需等待其完成处理,因为它是异步的。
我解决这个问题的方法如下:
您在ConfirmEvaluate中获取用户详细信息,并将用户重定向到userdata,然后一旦用户进入页面,就执行AJAX请求来获取需要很长时间处理的信息。当发出请求时,您可以显示加载图标,但当您收到 AJAX 请求的响应时,您可以隐藏此加载图标。查看这篇精彩的文章,了解如何使用 servlet 发出 AJAX 请求
我最近必须实现这样的东西,这里是一些示例代码:
<script>
//when page loads, the ajax request starts
$(document).ready(function() {
$(this).scrollTop(0);
getposts(username);
});
//ajax request that will show and hide the loader depending on response
var getposts = function (username) {
var params = {
user: username
};
$.get("../GetUserFeed",$.param(params),function(responseXml) {
$("#user-feed").append($(responseXml).find("feed").html()); // Parse XML, find <data> element and append its HTML to HTML DOM element with ID "somediv".
$('#logo-loader').hide();
if(isBlank(responseXml)){
$('#logo-loader-completed').show();
$('#logo-loader-image').hide();
}
});
};
</script>
这是您正在寻找的解决方案。您可以使用此示例来解决您的问题。
<script>
//when page loads, the ajax request starts
$(document).ready(function() {
$(this).scrollTop(0);
getposts(username);
});
//ajax request that will show and hide the loader depending on response
var getposts = function (username) {
var params = {
user: username
};
$.get("../GetUserFeed",$.param(params),function(responseXml) {
$("#user-feed").append($(responseXml).find("feed").html()); // Parse XML, find <data> element and append its HTML to HTML DOM element with ID "somediv".
$('#logo-loader').hide();
if(isBlank(responseXml)){
$('#logo-loader-completed').show();
$('#logo-loader-image').hide();
}
});
};
</script>