I'm trying to send some data to a php script and then return some other data. I can't figure out how to access the data I send to the php script. This post on stackoverflow was not helpful: Reading JSON POST using PHP Is the sent data in $_POST? Is it in $data or $params? How can I access it and print it out.
Here's what I have:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Http Requests & JavaScript</title>
<link rel="stylesheet" href="app.css">
<script src="xhr.js" defer></script>
</head>
<body>
<section id="control-center">
<button id="get-btn">GET Data</button>
<button id="post-btn">POST Data</button>
</section>
</body>
</html>
xhr.js
const getBtn = document.getElementById('get-btn');
const postBtn = document.getElementById('post-btn');
const sendHttpRequest = (method, url, data) => {
const promise = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.responseType = 'json';
if (data){
xhr.setRequestHeader('Content-Type', 'application/json');
}
xhr.onload = () => {
resolve(xhr.response);
}
xhr.send(JSON.stringify(data));
});
console.log(promise);
return promise;
};
const getData = () => {
sendHttpRequest('GET', 'http://localhost/async/data.json').then(responseData => {
console.log(response);
});
};
const sendData = () => {
sendHttpRequest('POST', 'http://localhost/async/data.php', {
email: 'drcrocket@gmail.com',
password: 'bowie'
}).then(responseData => {
console.log(responseData);
});
};
getBtn.addEventListener('click', getData);
postBtn.addEventListener('click', sendData);
data.php
<?php
$myJson = '{
"per_page":"6",
"total":"12",
"total_pages":"2",
"data":
[
{
"id":"1",
"email":"rdumdumle@gmail.com",
"first_name":"david",
"last_name":"escabar"
},
{
"id":"2",
"email":"bluesky@gmail.com",
"first_name":"Willie",
"last_name":"Nelson"
}
]
}';
print_r($myJson);
//print_r($data);
//print_r($_POST);
?>