javascript - 禁用按钮调用服务器然后重新启用按钮

Question

我见过很多和我类似的问题，但是花了几个小时浏览，找不到适合我的情况的答案。

我有一个基于 Go 的网络服务器。我有一个 HTML 模板页面，可以让我用当前浏览器时间更新 'nix 系统上的硬件时钟和系统时钟:

更新按钮的类型为提交并调用 Go 代码，这会进行一些系统调用，这需要几秒钟，而且我不能让这个服务器代码在它仍在处理第一个请求时被调用两次。

所以我想禁用更新按钮，然后在服务器响应后重新启用它。

我有 jQuery，所以我知道我可以有一个通过“onclick”调用的函数并进行这些调用:

$("#updateButton").prop("disabled", true);
$("#updateButton").prop("disabled", false);

我有通过按钮提交的表单(而不是例如 jQuery 调用 - 虽然我洗耳恭听)因为我希望表单在服务器响应时刷新。所以我有这个:

<form action="/clock" method="POST">
    ...
</form>

这是为了让页面上的一些值得到更新。如顶部的状态信息和各个字段中的值(更新为实际设置的值)。

我遇到的第一个问题是，如果我在单击按钮时调用 JS 函数，并且它按照上面的方法禁用了按钮，那么我的服务器代码就不会被调用!我不知道为什么 - 这会以某种方式停止发布请求吗？

<script>
function getTime() {
    // Disable update button while waiting for response
    $("#updateButton").prop("disabled", true); // Stops post request???

    // How to re-enable update button?

}
</script>

其次，如何重新启用该按钮？我不知道如何判断服务器何时响应。

Answer 1

因为您是说要在单击按钮后禁用提交按钮。您还说您希望在提交表单时刷新页面。

<form action="" method="post" onsubmit="subBtn.disabled = true; return true;">
    <input type="submit" name="subBtn" value="submit"/>
</form>

在上面的代码中，当<form>已提交，<input>名为 subBtn 的字段被禁用并且true为 <form> 返回继续提交过程。重新加载页面后，按钮将恢复其原始状态，即 enabled。 .

---

我不确定下面的代码是怎么回事，或者 getTime() 是如何/何时发生的函数已执行，但 return true;可能只是提交表格。

<script>
function getTime() {
    $("#updateButton").prop("disabled", true);
    return true; // this to continue with the original <form> process
}
</script>