Passing Data between Javascript and PHP

In web applications, it is often necessary to exchange data between the client-side Javascript code and the server-side PHP scripts. This article demonstrates how to establish this communication channel and pass data in both directions.

Passing Data from Javascript to PHP

To send data from Javascript to PHP, you can make an HTTP request to a PHP script. One way to do this is through the XMLHttpRequest object:

// Data to be sent to PHP script
const data = {tohex: 4919, sum: [1, 3, 5]};

// Create an XMLHttpRequest object
const httpc = new XMLHttpRequest();

// Open a POST request to the PHP script
httpc.open("POST", "server.php", true);

// Set the request header to specify the content type
httpc.setRequestHeader("Content-Type", "application/json");

// Send the data to the PHP script
httpc.send(JSON.stringify(data));

// Process the response from the PHP script
httpc.onreadystatechange = function() {
  if (httpc.readyState === 4 && httpc.status === 200) {
    console.log(httpc.responseText);
  }
};

Passing Data from PHP to Javascript

To send data from PHP to Javascript, you can use the echo statement:

// Retrieve data from the HTTP request body
$data = json_decode(file_get_contents("php://input"));

// Calculate the hex value and sum
$tohex = base_convert($data->tohex, 10, 16);
$sum = array_sum($data->sum);

// Echo the results
echo json_encode([$tohex, $sum]);

The Javascript script can then process the response using JSON.parse().