Node.js+EJS登录页面点击后仅刷新不跳转问题求助

核心问题1：表单默认提交行为未完全阻止 #

登录按钮为type="submit"，点击后会触发表单默认同步提交，导致页面直接刷新，覆盖前端fetch异步请求的结果。当前代码仅在验证失败时阻止默认行为，验证通过时未做处理，因此页面依然会刷新。

修改前端JS代码： #

在点击事件开头就阻止默认行为，确保异步请求能正常执行：

button.addEventListener("click", (event) => {
  // 始终阻止表单默认提交行为
  event.preventDefault();
  
  let check = checkUserNameValue(userName.value);
  // 用逻辑与合并两个验证结果，避免覆盖
  check = check && checkPasswordValue(password.value);

  if (!check) {
    return false;
  }

  let obj = {
    userName: userName.value,
    password: password.value,
  };
  fetch("/loginAdmin", {
    method: "post",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(obj)
  })
  .then(response => {
    if (response.ok) {
      // 登录成功，获取服务端返回的HTML替换当前页面
      return response.text();
    } else {
      // 登录失败，获取错误信息并更新页面提示
      return response.text().then(text => { throw new Error(text); });
    }
  })
  .then(html => {
    document.documentElement.innerHTML = html;
  })
  .catch(err => {
    console.error(err);
    // 更新登录页面的错误提示
    document.querySelector("h3[style='color: red;']").textContent = "اسم المستخدم او كلمة المرور خاطئة";
  });
});

核心问题2：服务端存在未定义变量 #

服务端代码中savedData未声明，需修正为数据库查询返回的结果：

app.post("/loginAdmin", async(req, res) => {
  try {
    let adminPassword = req.body.password;
    let adminUserName = req.body.userName;

    let admin = new Admin();

    // 接收数据库查询结果，假设selectAdminFromDBForLogin返回用户数据或false
    const savedData = await admin.selectAdminFromDBForLogin(adminUserName, adminPassword);
    if(savedData === false) {
      res.render("admin/login.ejs", {message:'اسم المستخدم او كلمة المرور خاطئة'});
      return;
    }
    console.log(savedData[0].adminID);
    res.render("admin/mainPage.ejs", {
      ID: savedData[0].adminID,
      name: savedData[0].adminName,
      userName: savedData[0].adminUserName,
      gender: savedData[0].adminGender,
      validity: savedData[0].adminValidity,
    });

  } catch (err) {
    console.log(err);
    res.status(500).send(err.message);
  }
});

可选优化：改用传统表单同步提交（更简单） #

如果不需要异步提交，可直接让表单按传统方式提交，省去fetch处理：

修改EJS表单代码： #

添加method="post"、action="/loginAdmin"，并给输入框加name属性（服务端req.body依赖该属性取值）：

<form method="post" action="/loginAdmin">
  <div class="col-md-12 mb-4">
    <div class="form-outline">
      <input type="text" id="userName" name="userName" class="form-control form-control-lg userName" placeholder="أدخل اسم المستخدم"/>
    </div>
  </div>

  <div class="col-md-12 mb-4">
    <div class="form-outline">
      <input type="password" id="password" name="password" class="form-control form-control-lg password" placeholder="أدخل كلمة المرور"/>
    </div>
  </div>

  <!-- 其余按钮保持不变 -->
</form>

修改前端JS代码： #

仅保留验证逻辑，验证失败时阻止提交：

button.addEventListener("click", (event) => {
  let check = checkUserNameValue(userName.value);
  check = check && checkPasswordValue(password.value);

  if (!check) {
    event.preventDefault();
    return false;
  }
  // 验证通过，表单自动提交到服务端，由服务端直接渲染页面
});

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