I used to be able to make jQuery AJAX requests perfectly well in NodeJS, but when I try to do the same in PHP, I have several issues. Nothing I could find in SO could help, so I'd like to ask, what's the problem with my simple example?
index.php - really isn't much, only loading 2 JS, 1 PHP and defining a button and a paragraph.
<html>
<head>
<script src='jquery-3.0.0.js'></script>
<script src='main_js.js'></script>
</head>
<body>
<button id="action" onClick="Send()">Send data</button>
<p id="result">Lorem ipsum</p>
<?php require('main_php.php'); ?>
</body>
</html>
main_js.js - it contains the function associated to the 'onClick' event.
function Send(){
var data_JSON = {
input: "test",
message: "Sending..."
};
$.ajax({
url: 'main_php.php',
type: 'POST',
data: data_JSON,
contentType: 'application/json',
success: function(data){
alert(data);
document.getElementById("result").innerHTML = "DONE!";
}
});
}
main_php.php - it listens to POST requests, theoretically, and sends back a JSON with echo. Again, theoretically...
<?php
if ($_POST){
// Make a array with the values
$vals = array(
'input' => $input,
'message' => $message
);
echo json_encode($vals, JSON_PRETTY_PRINT); // Now we want to JSON encode these values to send them to $.ajax success.
exit; // to make sure you aren't getting nothing else
}
?>
jQuery AJAX's success function runs, as the text "DONE!" appears in the paragraph, but the alert message is entirely empty. alert(data.input) (and same for message) shows undefined.
It is clear that no data is sent back to the AJAX request. How can I fix it?
Note: it is the entirety of the code, there's nothing else shown, and I also shortened and simplified as much as possible.
