Spring Boot项目JSP页面点击提交后显示加载GIF的实现问题咨询

不需要用到jQuery和Ajax，仅用少量原生JS和CSS即可实现需求，步骤如下：

1. 补充hidden类的CSS样式 #

你需要先在页面的<head>标签内添加如下样式，确保hidden类能生效隐藏元素，同时可以给加载层加个居中样式提升体验：

<style>
.hidden {
    display: none !important;
}
/* 加载层居中显示，避免和页面其他元素重叠 */
.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}
</style>

2. 给表单和提交按钮加标识 #

给你的提交表单、提交按钮加上id属性，方便JS获取元素，示例：

<form id="dataForm" method="post" action="你的后端处理接口地址">
    <!-- 你页面原有其他表单字段 -->
    <button type="submit" id="submitBtn">提交</button>
</form>

3. 修正并替换原有JS代码 #

你原有代码存在拼写错误、逻辑倒置的问题，直接替换为如下代码即可：

<script type="text/javascript">
// 等待页面DOM加载完成后执行逻辑
document.addEventListener("DOMContentLoaded", function(){
    const loader = document.querySelector(".loader");
    const submitBtn = document.getElementById("submitBtn");

    // 绑定提交按钮的点击事件
    submitBtn.addEventListener("click", function(){
        // 移除hidden类，显示加载动图
        loader.classList.remove("hidden");
        // 可选：禁用提交按钮，防止用户重复点击提交
        submitBtn.disabled = true;
    });
});
</script>

该方案完全适配普通表单提交场景：点击提交按钮后加载动图立即显示，后端处理期间会一直停留在当前页面展示动图，直到后端处理完成跳转details.jsp页面为止。

内容的提问来源于stack exchange，提问作者user7907880