PHP table data processing: Avoid directly defining $_POST, and use AJAX to optimize interaction

 <?php for ($j = 0; $j < count($requests); $j): ?>
    <tr id="'<?php" echo htmlspecialchars>' class="table-row">
        <?php $request_type = ($requests[$j][&#39;request_type&#39;] == &#39;1&#39;) ? &#39;candidate&#39; : &#39;voter&#39;;
        ?>
        <td class="school">= htmlspecialchars($request_type) ?></td>
        <td class="name">= htmlspecialchars($requests[$j]['first_name']) ?></td>
        <td class="candidates">= htmlspecialchars($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; ?>

Key changes:

• Removed the tag outside each action button.
• The type property of the button is changed to "button" to prevent the default form submission behavior.
• Added data-type attribute (e.g. data-type='accept') to the button to distinguish operation types.
• The id attribute of the element directly contains request_id, which is convenient for JavaScript to obtain.
• The output data is escaped using htmlspecialchars to prevent XSS attacks.

2.2 JavaScript implements AJAX requests

Next, we use JavaScript's fetch API to handle button click events and send AJAX requests.

 <script>
    // Create a FormData object to build a POST request body let fd = new FormData();

    // traverse all buttons with name="acceptReq" or name="denyReq" document.querySelectorAll(&#39;button[name="acceptReq"], button[name="denyReq"]&#39;).forEach(bttn => {
        bttn.addEventListener(&#39;click&#39;, function(e) {
            // Block the default behavior of the button (if the type is not a button, there may be a default commit)
            e.preventDefault(); 

            // Find the nearest parent element upwards and get its ID
            let tr = this.parentNode.closest(&#39;tr&#39;);

            // Add the request ID and operation type to the FormData object fd.set(&#39;id&#39;, tr.id); // Get the <tr>&#39;s id as the request ID
            fd.set(&#39;type&#39;, this.dataset.type); // Get the data-type attribute of the button// Send POST request using the fetch API fetch(&#39;../assets/php/accept-requests.inc.php&#39;, { 
                method: &#39;post&#39;, 
                body: fd 
            })
            .then(r => r.text()) // The parsing server response is text.then(text => {
                // The callback function alert(text); // The pop-up window displays the information returned by the server// Here you can update the DOM according to the server response, such as removing the processed line// tr.remove();
            })
            .catch(e => {
                //Catch errors that occur during the request process console.error(&#39;AJAX request failed: %s&#39;, e);
                alert(&#39;The operation failed, please try again later.&#39;);
            });
        });
    });
</script>

Code parsing:

• FormData object: used to collect data in the form of key-value pairs and can automatically handle complex situations such as file uploads.
• document.querySelectorAll(): Select all buttons that need to be listened to.
• addEventListener('click', ...): Add a click event listener for each button.
• e.preventDefault(): Blocks the default behavior of the button and ensures that the request is sent by JavaScript control.
• this.parentNode.closest('tr'): Find the nearest parent element upwards through the event source (clicked button), thereby obtaining the data for that row.
• tr.id: Get the id attribute of the element, that is, request_id.
• this.dataset.type: Gets the data-type attribute value of the button.
• fetch(): AJAX API provided by modern browsers for sending network requests. method: 'post' is specified as a POST request, body: fd sends the FormData object as the request body.
• .then(): The response after the request is successfully processed. .text() parses the response body into plain text.
• .catch(): Captures errors that occur during request or response processing.

2.3 PHP backend processing logic

In the server-side ../assets/php/accept-requests.inc.php file, you can access the submitted data like you would handle a normal POST request.

 <?php // accept-requests.inc.php

if ($_SERVER[&#39;REQUEST_METHOD&#39;] === &#39;POST&#39;) {
    // Check and get the request ID
    $requestId = filter_input(INPUT_POST, &#39;id&#39;, FILTER_SANITIZE_NUMBER_INT);
    // Check and get the operation type $actionType = filter_input(INPUT_POST, &#39;type&#39;, FILTER_SANITIZE_STRING);

    if ($requestId && $actionType) {
        // Perform the corresponding database operation according to the operation type if ($actionType === &#39;accept&#39;) {
            // Execute the logic of accepting requests, such as updating the database status // delete from requests where request_id = $requestId; // Example: If you delete echo after acceptance "Request {$requestId} is accepted.";
        } elseif ($actionType === &#39;deny&#39;) {
            // Execute the logic of rejecting the request, such as deleting from the database // delete from requests where request_id = $requestId;
            echo "Request{$requestId} has been rejected.";
        } else {
            echo "Invalid operation type.";
        }
    } else {
        echo "The necessary request parameters are missing.";
    }
} else {
    echo "Invalid request method.";
}
?>

Notes:

• Security: Be sure to strictly verify and filter all data received from the client (such as using filter_input) to prevent security vulnerabilities such as SQL injection and XSS.
• Database operation: Perform database addition, deletion, and modification operations based on actual business logic.
• Response: The server should return a meaningful response, and the client JavaScript can update the UI according to this response.

3. Style optimization and complete examples

To provide a better user experience, some CSS styles can be added.

 <style>
    *{
      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=&#39;accept&#39;]:hover{
      background:lime
    }
    [data-type=&#39;deny&#39;]:hover{
      background:red;
      color:white;
    }
</style>

Assignment	Forename	Surname	Vote
candidate	Geronimo	Bogtrotter	Accept	Deny
candidate	Horatio	Nelson	Accept	Deny
voter	John	Smith	Accept	Deny

4. Summary and precautions

Through the explanation of this article, we understand that it is invalid to directly define the $_POST variable in the client code in PHP. For scenarios such as table row-level operations that require dynamic interaction, AJAX is a better choice, which provides the following advantages:

• Improve user experience: data submission and update can be completed without refreshing the entire page, making user operations more smooth.
• Efficient data transmission: only send necessary data to reduce network load.
• The front-end separation: the responsibilities are clearer, the front-end is responsible for UI interaction and data submission, and the back-end focuses on business logic and data processing.

Important tips:

1. Data Verification and Security: Always strictly verify, filter and escape all received data on the server side to prevent malicious input and security vulnerabilities.
2. Error handling: A robust error handling mechanism should be implemented in both client JavaScript and server PHP, and timely feedback operation results or problems to users.
3. DOM operation: After the AJAX request is successful, the client JavaScript should dynamically update the page's DOM based on the data returned by the server (for example, removing processed rows, update status, etc.) to maintain consistency between the UI and the data.

Mastering AJAX technology is an integral part of modern web development, and it can help us build more responsive and user-friendly applications.