XHR Data Transfer Between Javascript and PHP

Question

JS dispatch was successful. But it does not enter the if block in PHP. Whereas before I restarted the computer successfully entered the if block in PHP.
When successful, the data received is “1”. Even though I have set the static data sent is “4”.

Javascript code:

let xhr = new XMLHttpRequest();
let dataStorage = new FormData();
dataStorage.append('dataStorage', 4);

console.log("Data yang dikirim:", dataStorage.get('dataStorage'));

xhr.open('POST', 'sistemDB.php', true);
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log("AJAX request completed with status: " + xhr.status);
        // console.log(xhr.responseText);
    } else {
        console.log("AJAX request failed with status: " + xhr.status);
    }
};
xhr.onerror = function() {
    console.log("Request failed");
};
xhr.send(dataStorage);
console.log("Send berhasil");

PHP code:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    echo '<pre>';
    var_dump($_POST); // Display all POST data
    echo '</pre>';

    // Alternative way to check raw POST data
    echo '<pre>';
    echo 'Raw POST data: ' . file_get_contents('php://input');
    echo '</pre>';

    if (isset($_POST['dataStorage'])) {
        $data = $_POST['dataStorage'];
        echo htmlspecialchars($data); // Use htmlspecialchars to prevent XSS attacks
    } else {
        echo 'dataStorage not set';
    }
}
?>

Please help me

I am trying to change the static value to send to PHP, to a value of "4"

Notes: php and javascript scripts are located in the same file “sistemDB.php”.

Now what is the script file actually named, systemDB.php or sistemDB.php, as you have it in the code? (If mod_speling kicks in here to "correct" such an error, you might be losing your POST data due to the fact that the browser follows a redirect by making a GET request.) — C3roe
– C3roe, Commented Aug 1, 2024 at 6:05
What request(s) do you see the browser make, when you inspect this in the network panel of your browser dev tools? — C3roe
– C3roe, Commented Aug 1, 2024 at 7:10
Have you debugged and tested your PHP script? Is the server environment variable $_SERVER['REQUEST_METHOD'] available? What is the content of the superglobal $_POST? — Marcel
– Marcel, Commented Aug 1, 2024 at 8:23

Muhammad Rifqi Amir Putra · Accepted Answer · 2025-06-09 17:17:46Z

I solve this problem guys.

If you want to use XMLHttpRequests like me, the files where the XMLHttpRequests and PHP code are located should be different.

Example:
sistemDB.php

<script>
        let indexDump = 0;
        document.querySelectorAll('.viewStorage').forEach(button => {
            button.addEventListener('click', function(event) {
                event.preventDefault();
                let index = this.getAttribute('data-index');
                let detail = document.getElementById('detailStorage');

                if (detail.style.display === 'block' && index == indexDump) {
                    detail.style.display = 'none';
                } else {
                    detail.style.display = 'block';
                }

                const ajax = new XMLHttpRequest()
                ajax.open('POST', '../php/list_storage_handler.php', true)
                ajax.setRequestHeader('Content-Type', "application/x-www-form-urlencoded")
                ajax.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        detail.innerHTML = this.responseText;
                        console.log(this.responseText);
                    }
                }
                ajax.send("data=" + index);
                indexDump = index;
                // console.log(dataBtn)
            });
        });
    </script>

list_storage_handler.php

<?php
include 'connect.php';

$dataStorage = $_POST['data'];
$queryServer = "SELECT * FROM tb_server WHERE DATA_STORAGE LIKE '%$dataStorage%'";
$sqlServer = mysqli_query($conn, $queryServer);

echo '
<table class="table table-dark table-hover">
    <thead class="table-dark">
        <th scope="col" style="text-align: center;">ID SERVER</th>
        <th scope="col" style="text-align: center;">TOTAL RAM</th>
        <th scope="col" style="text-align: center;">TOTAL MEMORI</th>
        <th scope="col" style="text-align: center;">TOTAL CPU</th>
        <th scope="col" style="text-align: center;">OS</th>
        <th scope="col" style="text-align: center;">ESXi</th>
    </thead>
    <tbody>
';
if (mysqli_num_rows($sqlServer) == 0) {
    echo '<tr>';
    echo '<td colspan = "7">Belum ada server yang dibuat!</td>';
    echo '</tr>';
}
else {
    while ($result = mysqli_fetch_array($sqlServer)) {
        echo '<tr?>';
        echo '<td>' . $result['ID_SERVER'] . '</td>';
        echo '<td>' . $result['TOTAL_RAM'] . ' Gb</td>';
        echo '<td>' . $result['TOTAL_MEMORI'] . ' Gb</td>';
        echo '<td>' . $result['TOTAL_CPU'] . ' Cores</td>';
        echo '<td>' . $result['OS'] . '</td>';
        echo '<td>' . $result['ESXi'] . '</td>';
        echo '</tr>';
    }
}
echo '</tbody>';
echo '</table>';

The conclusions are

The file where the XML Http Requests should be different from the PHP file to retrieve data from the server.
So what is returned from the PHP file is in the form of HTML, not JSON or anything like that.

That's my solution if using 2 different languages [tag:(PHP and Javascript)]. Hope it helps

Please keep in mind that your SELECT request is highly vulnerable for SQL injection. Have a look at prepared statements to avoid getting hacked

Collectives™ on Stack Overflow

XHR Data Transfer Between Javascript and PHP

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related