PHP動態數據交互：通過AJAX優化表單提交與數據庫操作

1. 頁面刷新：每次提交都會導致整個頁面重新加載，中斷用戶體驗。
2. 複雜性：如果每行都有獨立的表單，會導致DOM結構冗餘；如果所有操作共用一個表單，則需要復雜的邏輯來區分是哪一行被操作。
3. 不流暢：用戶在進行多次操作時，頻繁的頁面刷新會降低工作效率。

採用AJAX進行異步數據處理

為了克服傳統表單提交的局限性，現代Web開發普遍採用異步JavaScript和XML（AJAX）技術。 AJAX允許客戶端在不重新加載整個頁面的情況下，與服務器進行數據交換。這為用戶提供了更流暢、響應更快的交互體驗。

在處理列表數據的接受/拒絕場景中，AJAX的優勢尤為明顯：

• 用戶點擊按鈕後，頁面保持不變。
• 只有必要的數據被發送到服務器。
• 服務器處理後，可以將結果（例如成功、失敗、更新後的數據）返回給客戶端，客戶端再根據結果局部更新頁面。

實現AJAX請求處理：前端部分

我們將通過一個示例來演示如何使用AJAX處理表格中的接受/拒絕請求。

1. HTML結構與數據屬性

首先，我們需要在PHP生成HTML時，為每一行數據及其操作按鈕準備好必要的信息。關鍵點在於：

• 移除 標籤：由於我們將使用JavaScript發送請求，不再需要傳統的HTML
  標籤。
• 行ID：將request_id 設置為 元素的id 屬性，方便JavaScript獲取。
• 數據類型屬性：使用HTML5 data-* 屬性（例如data-type='accept' 或data-type='deny'）來標記按鈕的操作類型。

以下是PHP生成表格行的示例代碼：

 <?php for ($j = 0; $j < count($requests); $j ): ?>
    <tr id="'<?php" echo>' class="table-row">
        <?php // 根據請求類型設置顯示文本if ($requests[$j][&#39;request_type&#39;] == &#39;1&#39;) {
                $request_type = &#39;candidate&#39;;
            } else {
                $request_type = &#39;voter&#39;;
            } 
        ?>
        <td class="school">=$request_type?></td>
        <td class="name">=$requests[$j]['first_name']?></td>
        <td class="candidates">=$requests[$j]['last_name']?></td>
        <td> 
            <button data-type="'accept'" name="acceptReq" value="req_accepted" type="button" class="btn btn-success">Accept</button> 
        </td>
        <td> 
            <button data-type="'deny'" name="denyReq" value="req_denied" type="button" class="btn btn-danger">Deny</button> 
        </td>
    </tr>
<?php endfor; ?>

注意：按鈕的type 屬性應設置為button，以防止其默認提交行為。

2. JavaScript處理邏輯

接下來，我們使用JavaScript來監聽按鈕點擊事件，並發送AJAX請求。這裡我們採用現代的fetch API。

 <script>
    // 創建一個FormData對象，用於構建POST請求體let fd = new FormData();

    // 選中所有帶有name="acceptReq"或name="denyReq"的按鈕document.querySelectorAll(&#39;button[name="acceptReq"],button[name="denyReq"]&#39;).forEach(bttn => {
        bttn.addEventListener(&#39;click&#39;, function(e) {
            // 阻止按鈕的默認行為（如果type不是button，這會阻止表單提交）
            e.preventDefault(); 

            // 獲取當前點擊按鈕的父級<tr>元素let tr = this.parentNode.closest(&#39;tr&#39;);

            // 從<tr>的id屬性獲取request_id
            fd.set(&#39;id&#39;, tr.id.trim()); // 使用trim()清除可能的空格// 從按鈕的data-type屬性獲取操作類型fd.set(&#39;type&#39;, this.dataset.type);

            // 使用fetch API發送POST請求fetch(&#39;../assets/php/accept-requests.inc.php&#39;, { 
                method: &#39;post&#39;, 
                body: fd // 將FormData對像作為請求體})
            .then(r => {
                if (!r.ok) { // 檢查HTTP響應狀態碼throw new Error(`HTTP error! status: ${r.status}`);
                }
                return r.text(); // 解析響應為文本})
            .then(text => {
                // 請求成功後的回調函數alert(text); // 彈出服務器返回的消息// TODO: 在這裡根據服務器響應更新DOM，例如移除該行// tr.remove();
            })
            .catch(e => {
                // 捕獲請求或響應處理中的錯誤console.error(&#39;請求失敗:&#39;, e);
                alert(&#39;操作失敗，請重試。&#39;);
            });
        });
    });
</script>

JavaScript代碼詳解：

• FormData()：用於構建鍵值對形式的請求體，非常適合發送表單數據。
• document.querySelectorAll()：選中頁面上所有接受和拒絕按鈕。
• forEach() 和addEventListener()：為每個按鈕添加點擊事件監聽器。
• e.preventDefault()：阻止按鈕的默認行為，確保由JavaScript控制請求發送。
• this.parentNode.closest('tr')： this 指向當前被點擊的按鈕。 parentNode 獲取其父元素，closest('tr') 則向上查找最近的 祖先元素，從而獲取到包含request_id 的行。
• tr.id.trim()：獲取 的id 屬性值，並使用trim() 移除可能存在的空白字符。
• this.dataset.type：獲取按鈕上data-type 屬性的值。
• fetch()：發送HTTP請求。
  • method: 'post'：指定請求方法為POST。
  • body: fd：將FormData 對像作為請求體發送。
• .then()：處理fetch 請求的成功響應。第一個.then() 檢查HTTP狀態，第二個.then() 處理響應體內容。
• .catch()：捕獲請求過程中可能發生的網絡錯誤或Promise鏈中的其他錯誤。
• DOM更新（TODO）：在實際應用中，成功處理請求後，你通常會在這裡編寫代碼來更新UI，例如從表格中移除已接受/拒絕的行，或者更新行的狀態顯示。

實現AJAX請求處理：後端PHP部分（accept-requests.inc.php）

在服務器端（例如../assets/php/accept-requests.inc.php 文件），你需要編寫PHP代碼來接收AJAX請求發送的數據，並執行相應的數據庫操作。

 <?php // 確保只處理POST請求if ($_SERVER[&#39;REQUEST_METHOD&#39;] === &#39;POST&#39;) {
    // 獲取前端發送的數據$requestId = $_POST[&#39;id&#39;] ?? null;
    $actionType = $_POST[&#39;type&#39;] ?? null;

    // 驗證數據if ($requestId === null || $actionType === null) {
        http_response_code(400); // Bad Request
        echo "錯誤：缺少請求ID或操作類型。";
        exit();
    }

    // 數據庫連接（請替換為你的實際數據庫連接代碼）
    $servername = "localhost";
    $username = "username";
    $password = "password";
    $dbname = "your_database";

    try {
        $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $responseMessage = "";

        switch ($actionType) {
            case 'accept':
                // 執行接受邏輯，例如更新狀態或刪除請求$stmt = $conn->prepare("DELETE FROM requests WHERE request_id = :id");
                $stmt->bindParam(':id', $requestId, PDO::PARAM_INT);
                $stmt->execute();
                $responseMessage = "請求{$requestId} 已接受並刪除。";
                break;
            case 'deny':
                // 執行拒絕邏輯，例如更新狀態或刪除請求$stmt = $conn->prepare("DELETE FROM requests WHERE request_id = :id");
                $stmt->bindParam(':id', $requestId, PDO::PARAM_INT);
                $stmt->execute();
                $responseMessage = "請求{$requestId} 已拒絕並刪除。";
                break;
            default:
                http_response_code(400); // Bad Request
                echo "錯誤：無效的操作類型。";
                exit();
        }

        echo $responseMessage; // 返回成功消息給前端} catch (PDOException $e) {
        http_response_code(500); // Internal Server Error
        echo "數據庫操作失敗：" . $e->getMessage();
    } finally {
        $conn = null; // 關閉數據庫連接}

} else {
    http_response_code(405); // Method Not Allowed
    echo "只允許POST請求。";
}
?>

PHP代碼詳解：

• $_SERVER['REQUEST_METHOD']：確保只有POST請求才能進入處理邏輯。
• $_POST['id'] 和$_POST['type']： PHP會自動解析FormData 發送的數據，並通過$_POST 超全局變量訪問。
• 數據驗證：在處理數據之前，務必驗證request_id 和actionType 是否存在且有效，這是安全和健壯性的基本要求。
• 數據庫操作：使用PDO進行數據庫連接和操作，推薦使用預處理語句(prepare 和bindParam) 來防止SQL注入攻擊。
• switch 語句：根據actionType 的值執行不同的業務邏輯（接受或拒絕）。
• 響應：通過echo 將處理結果（例如成功消息或錯誤信息）返回給前端。
• HTTP狀態碼：設置適當的HTTP狀態碼（如200 OK、400 Bad Request、500 Internal Server Error、405 Method Not Allowed）有助於前端更好地理解服務器響應。

樣式美化(CSS)

為了提供更好的視覺反饋，可以添加一些CSS樣式，例如鼠標懸停效果。

 *{
  transition:ease-in-out all 100ms;
  font-family:monospace
}
th{
  background:rgba(50,50,100,0.5);
  color:white;
}
tr{
  margin:0.25rem;
}
tr:hover td{
  background:rgba(0,200,0,0.25);
}
td,
th{
  margin:0.25rem;
  border:1px dotted rgba(0,0,0,0.3);
  padding:0.45rem
}
button:hover{
  cursor:pointer;
}
[data-type='accept']:hover{
  background:lime
}
[data-type='deny']:hover{
  background:red;
  color:white;
}

總結與最佳實踐

通過本教程，我們學習瞭如何利用AJAX技術，特別是fetch API，優化Web應用中的動態數據交互。這種方法不僅提升了用戶體驗，也使得前端和後端邏輯分離更加清晰。

關鍵點回顧：

• 避免手動設置$_POST： $_POST 是服務器解析請求時自動填充的。
• *使用`data- ` 屬性：** 在HTML中存儲與元素相關的小數據，方便JavaScript獲取。
• AJAX (fetch API)：實現異步請求，避免頁面刷新。
• FormData 對象：方便地構建POST請求體。
• 後端PHP處理：接收$_POST 數據，執行數據庫操作，並返迴響應。
• 安全性：始終對所有用戶輸入進行驗證和過濾，使用預處理語句防止SQL注入。
• 用戶反饋：在AJAX請求進行中提供加載指示，請求成功或失敗後給出明確反饋（如消息提示、DOM更新）。

通過遵循這些原則，您可以構建出更加高效、用戶友好的Web應用程序。