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

Question

我正在构建一个 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 请求以刷新表格的内容，我觉得这是一个探索的方向，以实现我想要的结果，但看到一个类似的例子完成将非常有帮助。在等待底层控制器完成处理时，如何在当前页面上显示请等待的旋转圆圈？

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

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