PHP e le Fetch API di JavaScript

Short link

In questo tutorial vedremo come PHP può interagire con le Fetch API JavaScript.

Il formato usato dalle Fetch API è JSON, quindi durante l'elaborazione della richiesta dobbiamo trasformarne il corpo da stringa ad oggetto JSON.

PHP non supporta nativamente questo tipo di richiesta nei suoi array globali, quindi dobbiamo ottenere il flusso di input dello script e convertirlo in JSON.

header('Content-Type: application/json');
$input_data = json_decode(file_get_contents('php://input'), true);
$output_data = ['encoded' => md5($input_data['string'])];
echo json_encode($output_data);
exit;

L'oggetto JSON restituito da PHP avrà la proprietà encoded che nel nostro esempio conterrà il valore MD5 della stringa passata da JavaScript in input.

In JavaScript la richiesta segue lo standard delle richieste con le Fetch API.

'use strict';

const form = document.querySelector('#form');

form.addEventListener('submit', e => {
    e.preventDefault();
    const string = form.querySelector('#string').value;
    fetch('ajax.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ string } )
    }).then(response => response.json())
        .then(data => {
            document.querySelector('#result' ).innerText = data.encoded;
        });
}, false);

Non importa il metodo HTTP usato se il formato di invio è JSON, poiché gli array globali $_GET, $_POST e $_REQUEST non conterranno i dati inviati.

L'autore

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