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

【问题标题】：How to display a progress / please wait type component while waiting for a long POST request如何在等待长 POST 请求时显示进度/请等待类型组件
【发布时间】：2019-01-10 17:35:55
【问题描述】：

我正在构建一个 Web 应用程序，其中包含一些可能需要几秒钟才能完成的功能，例如在单击链接后导入 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/

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

在等待底层控制器完成处理的同时，如何在当前页面显示请稍候的旋转圆圈？

【问题讨论】：

标签： java css spring-boot jsp progress-bar

【解决方案1】：

我选择了这样的东西，感谢字体真棒：

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

这让控制器做它的事情并显示进度微调器，直到页面被重定向。

【讨论】：