如何实现表单提交后显示加载图标并延迟5秒跳转至目标页面

嘿，新手小伙伴别担心！我给你准备了一套完整的可直接复用的代码，每一步都有详细注释，你跟着抄就能实现需求～

核心思路 #

默认的表单提交会立刻跳转到目标页面，所以我们需要：

1. 阻止表单的默认提交行为
2. 显示加载图标/提示
3. 用AJAX提交表单数据（和原表单的POST行为一致）
4. 等待5秒后，手动跳转到目标页面
5. 处理提交失败的情况，给用户反馈

完整代码示例 #

你可以直接把下面的代码复制到你的HTML文件中，替换掉原来的表单即可：

HTML部分 #

<!-- 给表单添加id，方便JS获取 -->
<form id="myForm" action='page.html' method='post'>
  <input type="text" name="name" placeholder="Enter your name here">
  <input type="submit" value="Submit">
</form>

<!-- 加载提示容器，初始隐藏 -->
<div id="loadingSpinner" style="display: none;">
  <div class="spinner"></div>
  <p>正在提交，请稍候...</p>
</div>

CSS部分（放在<style>标签里，或者外部CSS文件） #

/* 加载提示的定位，让它居中显示 */
#loadingSpinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: Arial, sans-serif;
}

/* 旋转的加载图标，纯CSS实现，不用依赖外部图片 */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3; /* 浅色边框 */
  border-top: 4px solid #3498db; /* 蓝色顶部边框，旋转时形成动画 */
  border-radius: 50%;
  animation: spin 1s linear infinite; /* 旋转动画 */
  margin: 0 auto 10px;
}

/* 定义旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 提交后禁用表单的样式，防止重复点击 */
.form-disabled input {
  opacity: 0.6;
  pointer-events: none;
  background-color: #eee;
}

JavaScript部分（放在<script>标签里，建议放在</body>标签之前） #

// 获取表单和加载提示元素
const form = document.getElementById('myForm');
const loadingSpinner = document.getElementById('loadingSpinner');

// 监听表单的提交事件
form.addEventListener('submit', async function(e) {
  // 1. 阻止表单默认提交行为（不然会立刻跳转到page.html）
  e.preventDefault();

  // 2. 给表单添加禁用样式，防止用户重复点击提交按钮
  form.classList.add('form-disabled');

  // 3. 显示加载提示
  loadingSpinner.style.display = 'block';

  try {
    // 4. 收集表单里的所有数据
    const formData = new FormData(form);

    // 5. 用fetch API发送POST请求，模拟原表单的提交行为
    const response = await fetch(form.action, {
      method: form.method,
      body: formData
    });

    // 6. 判断提交是否成功
    if (response.ok) {
      // 提交成功后，等待5秒再跳转到目标页面
      setTimeout(() => {
        window.location.href = form.action;
      }, 5000); // 5000毫秒 = 5秒
    } else {
      // 如果提交失败，提示用户并恢复表单状态
      alert('提交失败，请重试');
      loadingSpinner.style.display = 'none';
      form.classList.remove('form-disabled');
    }
  } catch (error) {
    // 处理网络错误等意外情况
    alert('提交出错，请检查网络连接');
    loadingSpinner.style.display = 'none';
    form.classList.remove('form-disabled');
  }
});

新手友好提示 #

1. 确保你的page.html文件存在，或者把action属性改成你实际的目标页面路径
2. 代码里的加载图标是纯CSS实现的，不需要额外下载图片或图标库，非常方便
3. 如果不需要提交数据（只是想模拟跳转），可以去掉fetch相关代码，直接在e.preventDefault()后显示加载，然后用setTimeout跳转

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