如何在等待长 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"&nbsp;&nbsp; &nbsp; title="Export Formulary Add Messages" onclick="showPleaseWait()">在一个包含的 JS 文件中写了这个函数：function showPleaseWait(){&nbsp; &nbsp; $('.modal').modal('show');}<div class="modal fade bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">&nbsp; &nbsp; <div class="modal-dialog modal-sm">&nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-content" style="width: 200px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="fa fa-spinner fa-spin fa-5x fa-fw" style="width: 200px;"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="please-wait-message">Please wait</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>以下导入在我的页面上：<link rel="stylesheet" th:href="@{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}"/>最后是这个 Maven 导入：<dependency>&nbsp; &nbsp; <groupId>org.webjars</groupId>&nbsp; &nbsp; <artifactId>font-awesome</artifactId>&nbsp; &nbsp; <version>4.7.0</version></dependency>这让控制器可以做它的事情并显示进度微调器，直到页面被重定向。