Servlet 加载时的加载屏幕

问题描述 投票:0回答:2

我有这个 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中遇到了一些类似的问题,但没有一个有具体的答案。

javascript java jsp servlets
2个回答
0
投票

你必须使用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>

0
投票

这是您正在寻找的解决方案。您可以使用此示例来解决您的问题。

<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>

© www.soinside.com 2019 - 2024. All rights reserved.