java - 如何在等待长 POST 请求时显示进度/请等待类型组件

Question

我正在构建一个网络应用程序，其中包含一些可能需要几秒钟才能完成的功能，例如在单击链接后导入 2000 多个实体。

一个这样的功能首先让用户选择一个 CSV 文件，将其上传到服务器，然后逐行遍历它以创建关联的实体并将它们保存在数据库中。

这是 JSP 页面的示例:

JSP

<form method="POST" enctype="multipart/form-data" action="<c:url value="/import/importFormulary" /> " class="form-style-7">
            <ul>
                <li>
                    <label> File : </label>
                    <input type="file" name="file" accept=".csv"/>
                </li>
            </ul>
            <input type="submit" value="Upload and Import" />
            <input type="reset" value="Reset" />
        </form>       

我想提交此表单以在页面上触发某种“请稍候”叠加层。像这样的东西真的很好:http://tobiasahlin.com/spinkit/

我知道“等待本地主机”消息是 Controller 在后台执行操作，这意味着此表单所在的页面在技术上不再处于 Activity 状态。知道这个事实后，我正在努力弄清楚如何实现这一点。我在我的应用程序中有一个地方，我每秒执行一次 AJAX 请求以刷新表格的内容，我觉得这是一个探索的方向，以实现我想要的结果，但看到一个类似的例子done 会很有帮助。

如何在等待底层 Controller 完成处理时显示一个旋转的圆圈请在当前页面等待？

Answer 1

我解决了这样的问题，感谢 font awesome :

<a th:href = "@{'/export/formularyAdd/' + ${facility.id}}" class="btn btn-outline-info eBtn" 
    title="Export Formulary Add Messages" onclick="showPleaseWait()">

在包含的 JS 文件中编写此函数:

function showPleaseWait()
{
    $('.modal').modal('show');
}

<div class="modal fade bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" style="width: 200px;">
            <span class="fa fa-spinner fa-spin fa-5x fa-fw" style="width: 200px;"></span>
            <p class="please-wait-message">Please wait</p>
        </div>
    </div>
</div>

以下导入在我的页面上:

<link rel="stylesheet" th:href="@{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}"/>

最后这个 maven 导入:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>4.7.0</version>
</dependency>

这让 Controller 执行它的操作并显示进度微调器，直到页面被重定向。