When my express server runs the deliverCard() method, it sends a set of key/value pairs.
app.get('/', (req, res) => {
let card = deck.deliverCard();
console.log('get', card)
res.render('layout.ejs', {element:card});
});
app.post('/', (req, res) => {
let card = deck.deliverCard();
console.log('post', card);
res.json(card);
});
Regarding the use of XMLHttpRequest:
function updateCard(value) {
let request = new XMLHttpRequest();
let params = JSON.stringify({learned: value});
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
// Perform an action.
} else {
console.log('Status ' + request.status + ' text: ' + request.responseText);
}
}
request.open('POST', '/', true);
request.setRequestHeader('Content-type', 'application/json');
request.send(params);
}
close.addEventListener('click', function() {
value = checkbox[0].checked;
updateCard(value);
});
The issue I'm facing is that although I receive the correct request body, the get callback function is triggered on the server side after receiving the response.
Here are the events during the starting and initial page load:
app listening on port 3000!
get { name: 'div',
description: 'Defines a generic block of content, that does not carry any semantic value. Used for layout elements like containers.' }
Upon a request being made:
post { name: 'meter', description: 'Defines a horizontal meter.' }
get { name: 'progress', description: 'Defines a progress bar.' }
It seems like the page is reloading after receiving the response.