如何在 javascript 中等待服务器响应时禁用表单提交？

Question

我有一个表格

<form method="POST" id="form1" action"<%=login%>">
<input id="btn" type="submit" value="Log in" />

其中 %=login% 是调用 java 代码的 jsp 页面。

我注意到，如果我在登录时按住 enter 按钮或多次按下该按钮，它会不断为用户创建新会话和请求。在等待服务器响应时禁用连续按下按钮功能的最佳方法是什么？

谢谢

Answer 1

如果您多次检测到该操作，您可以阻止该操作

document.querySelector("#form1").addEventListener("submit", function(e) {
  if (this.dataset.active) {
    e.preventDefault;
    return;
  }
  this.dataset.active = 'true';
});

Answer 2

我会用 AJAX 请求调用 JSP 页面。要防止页面重新加载，请将 EventListener 添加到您的表单：

document.getElementById("form1").AddEventListener("submit", e => {
    e.preventDefault();
    document.getElementById("btn").disabled = true;
    // AJAX Request
});

如果请求成功或失败，请将按钮的 disabled-attribute 设置为 false。

如何在 javascript 中等待服务器响应时禁用表单提交？

How to disable form submit while it is waiting for a server response in javascript?

javascript

jsp