Con JavaScript inviare una richiesta POST in AJAX è relativamente semplice.
Possiamo usare l'oggetto FormData per passare al server le variabili POST di una richiesta AJAX.
'use strict';
const request = (url, queryObj) => {
return new Promise((resolve, reject) => {
let httpRequest = new XMLHttpRequest();
let queryString = new FormData();
for(let p in queryObj) {
queryString.append(p, queryObj[p]);
}
httpRequest.open('POST', url);
httpRequest.send(queryString);
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
let response = JSON.parse(httpRequest.responseText);
resolve(response);
} else {
reject({error: httpRequest.status});
}
}
};
});
};
Esempio d'uso:
'use strict';
const postData = async form => {
let queryObj = {
name: form.querySelector('#name').value,
email: form.querySelector('#email').value
};
try {
let result = await request('/ajax/post', queryObj);
//...
} catch(error) {
console.log(error);
}
};
document.addEventListener('DOMContentLoaded', () => {
let form = document.querySelector('#form');
form.addEventListener('submit', e => {
e.preventDefault();
postData(form);
}, false);
});