Your javascript looks good.
On the server side you don't want to use cURL. CURL is for getting responses from other servers, not from a client.
Here is an example PHP script that should work with your example:
<?php
header('Content-type: application/json');
$data = json_decode(file_get_contents('php://input'));
$msg = 'Hello ' . $data->name . '. Nice to meet you.';
echo json_encode(['name' => 'david', 'msg' => $msg]);
?>
Now in this example we are sending a JSON encoded object back in response. I did this since you said you want to pass JSON back and forth not just a text string. To accommodate this you have to modify your javascript slightly:
var data = {
'name': 'kevin'
};
var sendable = JSON.stringify(data);
console.log(sendable);
var request = new XMLHttpRequest();
request.open("POST", "192.168.64.2/testJsRequest.php", true);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
console.log("RESPONSE: " + JSON.parse(request.responseText).msg);
}
}
request.send(sendable);
It looks like you will know how to take it from here, but leave a comment if you need more help.
So in the PHP script $data will contain the full data structure that was encoded into JSON and sent via POST, and in javascript you can use data = JSON.parse(request.responseText) to get all the data sent back from PHP.
Edit to add examples of using POST for systems where direct access to the file system is restricted:
According to Mozilla docs there are two ways to submit data with XMLHttpRequest: Ajax only and using the FormData API and the disadvantage of the FormData option is that the data can't be JSON (stringified with JSON.stringify()). The advantage of the FormData API that we are interested in is that PHP will populate the $_GET, $_POST, $_REQUEST superglobals from data submitted in this way. We can also think of an easy workaround to send JSON through the FormData API.
First example using the FormData API normally:
var data = {
'name': 'kevin'
};
var sendable = new FormData();
for ( var key in data ) {
sendable.append(key, data[key]);
}
console.log(sendable);
var request = new XMLHttpRequest();
request.open("POST", "192.168.64.2/testJsRequest.php", true);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
console.log("RESPONSE: " + JSON.parse(request.responseText).msg);
}
}
request.send(sendable);
sendable is now a FormData object and we append key/value pairs using the append method. Mozilla has all the details on FormData. The problem here is that you can't send complex nested data.
note: you can create simple indexed arrays just by appending multiple values with the same key.
On the PHP side it would look like this:
<?php
header('Content-type: application/json');
$msg = 'Hello ' . $_POST['name'] . '. Nice to meet you.';
echo json_encode(['name' => 'david', 'msg' => $msg]);
?>
To send more complex data with JSON we can do this:
var data = {
'names': ['kevin', 'david']
};
var json_str = JSON.stringify(data);
var sendable = new FormData();
sendable.append('data', json_str);
console.log(sendable);
var request = new XMLHttpRequest();
request.open("POST", "192.168.64.2/testJsRequest.php", true);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
console.log("RESPONSE: " + JSON.parse(request.responseText).msg);
}
}
request.send(sendable);
And the corresponding PHP would look like this:
<?php
header('Content-type: application/json');
$data = json_decode($_POST['data']);
$msg = 'Hello ' . $data->names[0] . '. Nice to meet you.';
echo json_encode(['name' => 'david', 'msg' => $msg]);
?>
$_POSTprint_r($_POST);and look at what it shows, it will probably have the data you sent via AJAX call