如何防止表单从客户端提交多次?

阅读时长 4 分钟读完

在前端开发过程中,经常会遇到一个问题:当用户连续点击提交按钮时,可能会导致表单被重复提交多次。这个问题不仅会给用户带来困惑和烦恼,还可能造成数据重复提交等严重后果。

本文将介绍如何使用前端技术来解决这个问题,并提供相关的示例代码。

1. 防抖动(Debouncing)

防抖动是一种限制事件处理频率的方法。它可以确保在用户输入或操作结束之前,不会触发太多的事件。在表单提交的场景下,我们可以使用防抖动来确保只有最后一次点击才会触发表单提交。

下面是一段使用 Lodash 库实现的防抖动代码:

-- -------------------- ---- -------
------ -------- ---- ------------------

----- ------------ - ----------- -- -
  -- ------
-- ---- - -------- ----- --------- ----- ---

-- --------
--------------------------------------------------------- ----- -- -
  -----------------------
  ---------------
---

在上面的代码中,我们使用了 Lodash 的 debounce 函数来创建一个新函数 handleSubmit,它最多只能每 300 毫秒被调用一次。然后,我们将 handleSubmit 函数作为表单提交事件的回调函数,并对其进行了防抖动处理。

2. 禁用提交按钮

为了避免表单被重复提交,我们可以简单地禁用提交按钮。当用户点击提交按钮后,将其禁用,等待表单提交完成之后再启用。

下面是一段使用原生 JavaScript 实现的禁用提交按钮代码:

-- -------------------- ---- -------
-- --------
----- ------------ - ------------------------------------------------

-- --------
--------------------------------------------------------- ----- -- -
  -----------------------

  -- ------
  --------------------- - -----

  -- ------------------
  -------------------- -
    ------- -------
    ----- --- -----------------------
  --
    -------------- -- ----------------
    ---------- -- -
      ------------------
      --------------------- - ------
    --
    ------------ -- -
      ---------------------
      --------------------- - ------
    ---
---

在上面的代码中,当用户点击提交按钮时,我们获取到该按钮的元素,并将其禁用。然后,我们使用 fetch 函数提交表单数据,并在完成后启用提交按钮。无论是否成功提交,都要在回调函数里启用提交按钮,以确保用户可以继续提交表单。

3. 使用 Token 防止重复提交

使用 Token 是另一种有效的防止表单重复提交的方法。通过在每次请求中添加一个随机生成的 Token,这个 Token 可以帮助服务器识别并防止重复提交。

下面是一段使用 jQuery 实现的 Token 防止重复提交的代码:

-- -------------------- ---- -------
-- ---- -----
----- ----- - -------------------------------------

-- -------- ----- --
-------------
  ----- - ----- --
---

-- --------
---------------------- -- -
  -----------------------

  -- ------
  ------------------------------------------- ------

  -- ------------------
  --------------------- ----------------------
    ---------- -- -
      ------------------
      ------------------------------------------- -------
    --
    ----------- -- -
      ---------------------
      ------------------------------------------- -------
    ---
---

在上面的代码中,我们首先生成一个随机 Token,并将其添加到每个请求中

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/12100

纠错
反馈