JavaScript: inviare una richiesta POST in AJAX

Short link

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);
});

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.