在表单submit事件中调用event.preventdefault()可阻止默认提交和页面刷新，再用formdata配合fetch发送异步请求；登录成功存token并跳转，失败显示错误提示，同时禁用按钮防重复提交。

直接在表单的 submit 事件里调用 event.preventDefault()，就能阻止默认提交行为，然后用 fetch 或 axios 发异步请求。

绑定 submit 事件并阻止默认提交

表单提交会触发页面跳转或刷新，必须先阻止它：

• 给 <form></form> 元素添加 submit 监听器
• 在回调函数第一行写 event.preventDefault()
• 否则浏览器会按传统方式提交，整个页面重载

获取表单数据并构造请求体

推荐用 FormData 对象自动收集字段值，兼容性好、不用手动拼接：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

• const formData = new FormData(formElement)
• fetch('/login', { method: 'POST', body: formData })
• 如果后端要求 JSON，可转成对象：Object.fromEntries(formData)，再 JSON.stringify()

处理响应与用户反馈

登录成功或失败都要明确提示，避免用户重复点击：

• 请求中禁用提交按钮（如 button.disabled = true），防止重复提交
• 根据响应状态码或返回字段判断是否登录成功
• 成功时跳转页面（location.href = '/dashboard'）或存 token
• 失败时显示错误信息（如 form.querySelector('.error').textContent = '账号或密码错误'）

完整示例代码

HTML 部分：

  
  
  登录
  

JavaScript 部分：

document.getElementById('loginForm').addEventListener('submit', async function(e) {
  e.preventDefault();
  const btn = e.target.querySelector('button');
  btn.disabled = true;

  try {
    const res = await fetch('/api/login', {
      method: 'POST',
      body: new FormData(e.target)
    });

    if (res.ok) {
      const data = await res.json();
      localStorage.setItem('token', data.token);
      location.href = '/home';
    } else {
      throw new Error('登录失败');
    }
  } catch (err) {
    e.target.querySelector('.error').textContent = err.message;
  } finally {
    btn.disabled = false;
  }
});

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南