在 WordPress 中处理来自表单的多个 HTML 提交按钮按下

Question

所以我正在运行一个 WordPress 网站，它有一个我使用 HTML 制作的表单，其中包含一个文本字段、一个电子邮件字段、一个密码字段和一个提交按钮。

问题是用户可以向提交按钮发送垃圾邮件，而用户偶尔会这样做，因为我使用 AJAX 处理可能需要一段时间的表单提交。

任何优雅的解决方案都会很好。我有一些我认为可行的建议，但我不确定如何实施它们，它们是否真的有效，或者它们是否可行。

我想到的第一种可能性——当 WordPress 加载一个新页面时，它通常会出现带有灰色背景的漩涡状加载屏幕。我是否可以让加载屏幕过早出现，就像在我运行任何 AJAX 代码时一样，而不仅仅是在它更改页面时？

我正在考虑的第二种可能性 - 有没有办法阻止所有表单字段和提交按钮在您单击它时立即被按下，这样它就不会被发送垃圾邮件并且无法更改字段？这可以通过 JavaScript 工作吗（抱歉，JS 不是最好的）？

我正在考虑的第三种可能性 - 有没有一种方法可以让系统在 5-10 秒的时间内只接受来自 IP 的一个表单，而忽略在该冷却时间内提交的任何其他 POST 请求？

上述任何解决方案是否可行或足够可行？如果是这样，它们将如何或可以如何工作？我在想第二个可能是最容易实现的？但是，第一个不是向用户确认我们正在处理他们的数据，这样对 UX 会更好吗？

考虑 UX 的第四种可能性以及我认为更实用的解决方案——有没有办法阻止提交按钮和输入字段在按下提交按钮一次后被按下或编辑，然后有一个漩涡状的加载栏出现在它的下方或上方（可能通过 CSS 和 HTML？），以便用户知道该站点正在执行某些操作或正在加载？

需要注意的一点 - 更改必须仅在客户端进行，并且如果用户将来返回该页面，更改不应影响用户，这意味着如果他们刷新页面或稍后返回该页面，则不应保持阻塞状态.我知道这是隐含的，但只想说明这一点。

Answer 1

由于您是作为 AJAX 请求执行此操作的，我想您目前有一些与 onsubmit 事件相关联的 javascript。您的这个函数很可能会将数据编码为 JSON，然后使用 ajax 将其发送到服务器。

您可以做到这一点的一种方法是：

在全局范围内引入一个新变量（所以在onsubmit-handler 之外）；比如var submission_cache = '';之类的。

接下来，在您的 onsubmit 处理程序中，在您“将整个表单编码为单个 json 字符串”的阶段和您“实际发送数据”的阶段之间进行比较json 到 submission_cache 变量。如果匹配，则忽略提交，如果不匹配，则将 json 的副本（或它的 sha1 校验和）存储在 submission_cache 中，然后继续使用 ajax 内容。

---

这边：

由于它是页面上的变量，所以缓存与页面具有相同的生命周期。如果他们离开您的网站并稍后返回，该变量将再次为空，并且他们可以提交与上次相同的信息。

其次，如果他们在提交后 1 毫秒发现输入错误，他们可以重新提交（因为缓存不匹配），我认为这是可取的。

---

除了上述之外，您可以使用的另一个解决方案是简单地启用提交按钮上的 disabled 属性（在您的 onsubmit 处理程序函数中。在 setTimeout 或您的其中一个之后重新启用它ajax onreceived/onerror 闭包。