too long

I am currently working on a telecontrol application in which I am trying to send joystick coordinates from Javascript to PHP. However, I am never able to access the data via the PHP file as I get an Undefined Index error.

I am aware that this question has been addressed many times, but I have spent the past week going through forums and Google and none of the solutions I have tried have worked, so I would appreciate it if someone could take a look at my code to see if I have some fundamental misunderstanding or application-specific problem.

EDIT: I forgot to mention this earlier, but I had tried some example PHP/AJAX code that others have posted online, and running that code did not work either, which makes me think that maybe this is a problem with my server configuration.

My Code: (Only includes files I believe to be relevant to the problem; if you would like to see the other files in the project, plase let me know.) The JavaScript and PHP files are in the same directory. I am using XAMPP.

joystick.js (Contains ajax call)

var hasGP = false;
var repGP;

// Joystick State Variables
var triggerPressed;
var x_value;
var y_value;
var z_value;
var t_value;

function canGame() 
{
    return "getGamepads" in navigator;
}

function reportOnGamepad() 
{
    // Display the gamepad's ID.
    var gp = navigator.getGamepads()[0];
    var html = "";
    html += "<u>ID</u>: " + gp.id + "<br>";

    // Display the status of the x-axis.
    x_value = gp.axes[0];
    html += "<u>x-axis</u>: " + x_value + "<br>";

    // Display the status of the y-axis.
    trigger_pressed = gp.buttons[0].pressed;
    y_value = gp.axes[1];
    if (trigger_pressed)
    {
        html += "<u>Pitch angle</u>: " + y_value + "<br>";
    }
    else
    {
        html += "<u>y-axis</u>: " + y_value + "<br>";
    }

    // Display the status of the z-axis.
    z_value = gp.axes[3];
    html += "<u>z-axis</u>: " + z_value + "<br>";

    // Display the status of the t-axis.
    t_value = gp.axes[2];
    html += "<u>Roll angle</u>: " + t_value + "<br>";

    $("#gamepadDisplay").html(html);

    $.ajax({ url: 'ajax.php',
        type: 'POST',
        data: {x:x_value},
        success: function(data) 
        {
            console.log("x_value " + data + " has been sent to the  server.");
        }
    });

}

$(document).ready(function() 
{
    if(canGame()) 
    {
        var prompt = "To begin using your gamepad, connect it and press any button!";
        $("#gamepadPrompt").text(prompt);

        $(window).on("gamepadconnected", function() 
        {
            hasGP = true;
            $("#gamepadPrompt").html("<b>The gamepad has been successfully connected.</b><br><br>");
            console.log("connection event");
            repGP = window.setInterval(reportOnGamepad,100);
        });

        $(window).on("gamepaddisconnected", function() 
        {
            console.log("disconnection event");
            $("#gamepadPrompt").text(prompt);
            window.clearInterval(repGP);
        });

        // Set up an interval for Chrome
        var checkGP = window.setInterval(function() 
        {
            console.log('checkGP');
            if(navigator.getGamepads()[0]) 
            {
                if(!hasGP) $(window).trigger("gamepadconnected");
                window.clearInterval(checkGP);
            }
        }, 500);
    }
});

ajax.php (File to which Javascript data should be sent)

<?php
    $temp = $_POST['x'];
    if(isset($temp) && !empty($temp))
    {
        echo "x value is ". $temp ."!"; // Success Message
    }
?>

Error Message:

Notice: Undefined index: x in C:\xampp\htdocs\TeachMoverInterface\ajax.php on line 2

The PHP $_POST array appears to be empty.

Possibly Helpful Browser Debugging Info:

As I said, I have been looking at forums for the past week, so some of the actions I tried in order to fix the problem have been to change formatting, change cache and async attributes in the ajax method, substitute the ajax call with a $.post call or XMLHttpRequest, replacing the JavaScript variable with a number in the ajax call, and some other methods I have forgotten.

As several people have pointed out, my screenshot of the Google Chrome console shows that the ajax.php file is receiving the data sent by the ajax call. My mistake was that I believed accessing the ajax.php file directly should output the data, however as Jay Blanchard pointed out that was an incorrect approach. Thank you for everyone who pointed out my mistake. Also, thanks to Jeremy Harris for mentioning an alternative to AJAX that may be better suited for my application in terms of time performance.

Change data: {x:x_value}, into data: {"x":x_value},

<?php
if(!empty($_POST)){
    $temp = $_POST['x'];
    if(isset($temp) && !empty($temp))
    {
        echo "x value is ". $temp ."!"; // Success Message
    }
}
?>

modify your ajax.php code