How do I make an AJAX POST request with parameters to a PHP backend?

Question

This is an update to a previous question marked as a duplicate (How do I send an AJAX POST request with parameters to PHP?)

I am sending an AJAX request to a PHP backend.

The Javascript functions to make and receive the request:

var httpRequest;

function makeRequest(){
    httpRequest = new XMLHttpRequest();

    httpRequest.onreadystatechange = receiveResponse;
    httpRequest.open("POST", "ajax_handler.php", true);
    httpRequest.setRequestHeader('Content-Type', 'application/json');
    httpRequest.send(JSON.stringify({key:"value"}));
}

function receiveResponse() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
        if (httpRequest.status === 200) {
            console.log(httpRequest.responseText);
        }
    }
}

The PHP backend ajax_handler.php to process the request:

<?php
    $data = file_get_contents('php://input');
    echo $data;
?>

My original post was marked as a duplicate of this question. That page has no clear examples, though I was able to infer that I should use file_get_contents('php://input') instead of $_POST in the PHP backend, as shown.

Using the code shown, console.log(httpRequest.responseText) in the receiving function logs {"key":"value"} to the console. If I try to interpret this as an array in the PHP backend, however, with

<?php
    $data = file_get_contents('php://input');
    echo $data["key"];
?>

the response logs { to the console instead of the expected value.

In addition to the use of 'php://input', several responses in the linked duplicate also use the json_decode() function in the PHP backend.

If I include this function in the backend, however, as

<?php
    $data = json_decode(file_get_contents('php://input'));
    echo $data;
?>

The entire AJAX call breaks. It was set to trigger on a window click, but after including json_decode(), nothing happens on a window click, nothing is returned from the call, and nothing is logged to the console.

Without an example, it's hard for me to tell if I'm doing the AJAX cycle wrong, or if there's a different problem somewhere else in my code. So please, for the love of all that is holy, will someone please post or link me to a self-contained example showing how to make, process, and receive an AJAX call with parameters to a PHP backend? It's incomprehensible that this doesn't already exists somewhere on the internet, but I've been searching and asking for days, and I can't find a single example anywhere. This is without jQuery.

Thank you in advance.

Answer 1

Create an mcve and debug this piece by piece.

<?php
   $data = json_decode('{ "test": 123 }');
   echo $data;

Will output:

Recoverable fatal error: Object of class stdClass could not be converted to string in /...../test.php on line 4

You've got an object representing the data decoded from JSON. You need to echo a useful part of it. e.g.

<?php
   $data = json_decode('{ "test": 123 }');
   echo $data->test;