本文详解如何通过 javascript 在用户点击提交按钮后立即隐藏登录表单、显示加载 gif，避免页面跳转导致的 ui 中断，并提供兼容性强的原生 js 方案与关键注意事项。
在你的 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，可改为「延迟跳转」模拟加载效果：
立即学习“Java免费学习笔记（深入）”；
function processing(event) {
event.preventDefault();
document.getElementById('logsection').style.display = 'none';
document.getElementById('loading').style.display = 'block';
// 2 秒后跳转（模拟后端处理）
setTimeout(() => {
document.loginform.submit(); // 触发原生提交
}, 2000);
}
⚠️ 此方式无法捕获登录失败，仅作视觉过渡，不推荐用于真实项目。
通过以上改造，你的登录表单将真正实现“点击即隐藏、实时显加载、响应后跳转”的专业交互体验。