PHP 防抖技術應用：防止表單重複提交，提升用戶體驗

M66 2025-07-01

PHP 防抖技術應用：防止表單重複提交，提升用戶體驗

隨著互聯網的發展，表單提交已成為網頁應用中不可或缺的功能。然而，表單重複提交可能因為網絡延遲或用戶誤操作而導致數據錯誤或程序異常。為了解決這一問題，PHP防抖技術能夠確保表單提交的準確性，避免重複提交。

什麼是防抖技術？

防抖技術是一種控制操作頻率的技術，確保在規定的時間間隔內某個操作只會執行一次。當表單提交動作被觸發時，防抖技術通過設置一個計時器，保證只有在指定時間內沒有新的提交觸發時，才會執行提交操作。如果在計時器期間內再次點擊提交按鈕，計時器將被重置，從而避免了重複提交。

如何在PHP中實現防抖技術？

接下來，我們將通過一個具體的例子展示如何在PHP中實現防抖技術。假設我們有一個用戶註冊表單，其中包括姓名和郵箱字段，用戶提交表單後需要將數據保存到數據庫。為了確保用戶提交表單時不會因為頻繁點擊按鈕而產生重複提交，我們可以在表單提交時使用防抖技術。

PHP後端代碼示例：

<?php
// 連接數據庫
$mysqli = new mysqli("localhost", "username", "password", "database");

// 檢查連接是否成功
if ($mysqli-> connect_error) {
    die("連接失敗: " . $mysqli->connect_error);
}

// 獲取POST數據$name = $_POST[&#39;name&#39;];
$email = $_POST[&#39;email&#39;];

// 檢查記錄是否已經存在$query = "SELECT * FROM users WHERE name = &#39;$name&#39; AND email = &#39;$email&#39;";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    echo "記錄已存在";
} else {
    // 插入新記錄$insert = "INSERT INTO users (name, email) VALUES (&#39;$name&#39;, &#39;$email&#39;)";
    $mysqli->query($insert);
    echo "記錄保存成功";
}

// 關閉數據庫連接$mysqli->close();
?>

前端HTML和JavaScript代碼示例：

<form id="myForm" action="form_submit.php" method="POST">
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <button type="submit" id="submitButton">提交</button>
</form>

<script>
var form = document.getElementById("myForm");
var submitButton = document.getElementById("submitButton");
var debounceTimer = null;

form.addEventListener("submit", function(e) {
    e.preventDefault(); // 取消默認提交行為

    if (debounceTimer) {
        clearTimeout(debounceTimer);
    }

    debounceTimer = setTimeout(function() {
        form.submit(); // 延遲提交表單
    }, 1000); // 延遲時間設置為1秒
});
</script>

總結

通過PHP與JavaScript的結合，我們可以有效避免表單的重複提交，保證數據的準確性與程序的正常運行。這種防抖技術不僅提升了用戶體驗，還減少了由於誤操作引起的錯誤。