如何在表单提交后隐藏表单并显示加载动画（JavaScript 实现）-php教程-PHP中文网

如何在表单提交后隐藏表单并显示加载动画（JavaScript 实现）

本文详解如何通过 javascript 在用户点击提交按钮后立即隐藏登录表单、显示加载 gif，避免页面跳转导致的 ui 中断，并提供兼容性强的原生 js 方案与关键注意事项。

在你的 HTML 中，

的 action="login_users.php" 和 method="post" 会触发同步页面跳转——即浏览器会立即卸载当前页面、向服务器发送请求并加载新页面。这意味着：即使你在 onsubmit="processing()" 中执行了 DOM 操作（如隐藏表单），只要表单默认提交行为未被阻止，这些视觉变化往往来不及渲染就会被页面重定向中断，导致“看似没生效”。

✅ 正确做法：阻止默认提交 + 手动控制流程

你需要做三件事：

阻止表单默认提交行为（关键！）；
隐藏表单、显示加载状态；
通过 AJAX 提交数据（推荐）或延迟跳转（简易替代）。

以下是优化后的完整实现方案：

✅ 修改 HTML（仅需微调）

? 注意：onsubmit="return processing(event)" 中的 return 至关重要，它决定是否允许表单继续提交。

✅ 修正 JavaScript（修复 ID 错误 + 阻止默认行为）

function processing(event) {
  // 阻止表单默认提交（核心一步！）
  event.preventDefault();

  // ✅ 修复 ID：HTML 中是 id="logsection"，不是 "loginsection"
  const formSection = document.getElementById('logsection');
  const loadingEl = document.getElementById('loading');

  if (formSection && loadingEl) {
    formSection.style.display = 'none';
    loadingEl.style.display = 'block';

    // ✅ 使用 fetch 发起 AJAX 登录请求（推荐）
    const formData = new FormData(document.loginform);

    fetch('login_users.php', {
      method: 'POST',
      body: formData
    })
    .then(response => response.text())
    .then(data => {
      // 简单判断登录成功（可根据 login_users.php 实际返回调整）
      if (data.includes('Location: ../homepage.php') || data.trim().length === 0) {
        window.location.href = '../homepage.php';
      } else {
        alert('Väärä käyttäjänimi ja/tai salasana'); // 错误提示
        formSection.style.display = 'block';
        loadingEl.style.display = 'none';
      }
    })
    .catch(error => {
      console.error('Login failed:', error);
      alert('Yhteydenotto epäonnistui. Yritä myöhemmin uudelleen.');
      formSection.style.display = 'block';
      loadingEl.style.display = 'none';
    });
  }
}

✅ 补充 CSS（确保 loading 区域可见）

.loading {
  background-image: url('../img/loading.gif');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 200px;
  height: 200px;
  margin: 40px auto;
  display: none;
}

⚠️ 关键注意事项

ID 必须严格匹配：你 JS 中写的是 getElementById('loginsection')，但 HTML 中是 id="logsection" → 必须统一为 logsection，否则获取元素失败。
不要依赖 PHP 的 header() 重定向：AJAX 请求中 header("Location: ...") 不会触发浏览器跳转，需在 JS 中手动 window.location.href。
安全性提醒：当前 PHP 代码存在严重 SQL 注入风险（直接拼接 $username 和 $password），且使用已废弃的 md5() 做密码哈希。生产环境务必改用 password_hash() + password_verify()，并使用预处理语句（PDO/MySQLi prepared statements）。
无障碍友好：隐藏表单后，建议用 aria-hidden="true" 或焦点管理提升可访问性。

✅ 替代方案（无 AJAX，仅前端过渡）

若暂不引入 AJAX，可改为「延迟跳转」模拟加载效果：

Wordpress OAuth

启动并完成 WordPress.com OAuth 认证，通过 REST API 发布文章。适用于需要生成授权链接、交换授权码等场景。

下载

function processing(event) {
  event.preventDefault();
  document.getElementById('logsection').style.display = 'none';
  document.getElementById('loading').style.display = 'block';

  // 2 秒后跳转（模拟后端处理）
  setTimeout(() => {
    document.loginform.submit(); // 触发原生提交
  }, 2000);
}

⚠️ 此方式无法捕获登录失败，仅作视觉过渡，不推荐用于真实项目。

通过以上改造，你的登录表单将真正实现“点击即隐藏、实时显加载、响应后跳转”的专业交互体验。