PHP not detecting POST JSON data from JavaScript request

Question

I am in need of a little help with a small bit of my code that is essential to my application. I am making a small clicker game, and I want users to be able to save and load data via PHP to my server. I do not want to use Local Storage to make it harder for anyone to edit their economy and "cheat". When the user clicks on a save button I have, it fires my vue method which initializes the saving. I have had no problem getting the data into a JSON format, however I cannot get PHP to read this data via POST. I have checked for network headers, and it shows that stuff is being sent, it seems that PHP just isn't catching it. I'll include the code for the JS part and PHP part below. The PHP is only set to echo if the array_key_exists right now, as after getting this sorted out I will easily be able to handle the rest. Any help would be greatly appreciated!

I have tried to follow this, which has not worked so far Send JSON data from Javascript to PHP?

JS

saloOut: function() {
            var saveData = {
                saveMoney: this.money,
                saveCrystals: this.crystals,
            };
            saveData = "saveData=" + (JSON.stringify(saveData));
            var sendData = new XMLHttpRequest();
            sendData.open("POST", "salo.php", true);
            sendData.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            sendData.send(saveData);
            console.log(saveData);
        }

PHP

<?php
    if (array_key_exists("saveData", $_POST)) {
        echo "<p>SALO Ready!</p>";
    }
?>

Answer 1

Decode the JSON string at the PHP end before accessing values, like this:

<?php
    if(isset($_POST['saveData'])){
        $result = json_decode($_POST['saveData'], true);
        // use $result['saveMoney'] and $result['saveCrystals'] accordingly
    }
?>

Update# 1:

As OP commented below, I expect that it will print "SALO Ready" but it is instead doing nothing

That's because you are not using responseText property of XMLHttpRequest object to see the text received from the server. Use below snippet to see the response text.

saloOut: function() {
    var saveData = {
        saveMoney: this.money,
        saveCrystals: this.crystals,
    };
    saveData = "saveData=" + (JSON.stringify(saveData));
    var sendData = new XMLHttpRequest();
    sendData.open("POST", "salo.php", true);
    sendData.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    sendData.send(saveData);

    sendData.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        }
    };
}

Reference: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseText