Interazione Javascript e PHP per realizzare applicazioni client-server e gestione database
Articolo dedicato a come far interagire Javascript e PHP nel mondo del web per poter scrivere delle applicazioni web che interagiscano lato client e server per la manipolazione di dati inseriti dall’utente tramite una pagina web(lato client), come ad esempio un form e un database (lato server) per immagazzinare il dato.
Vediamo il codice HTML che crea il form, tralascio parte del codice html per creare la pagina concentrando l’attensione al puro form.
...
<form id="primoform">
<input type="text" name="nome">
<input type="text" name="cognome">
</form>
<button onclick="inviadati()">INVIA</button>
<div id="risultato"></div>
...
<script>
function inviadati(){
risposta = document.getElementById("risultato");
form=document.querySelector('#primoform');
formData = new FormData(form);
xhttp = new XMLHttpRequest();
xhttp.open('POST', "saluta.php", false);
xhttp.onreadystatechange = function (){
if(this.readyState == 4 && this.status == 200){
risposta.innerHTML = this.responseText;
}
}
xhttp.send(formData);
}
</script>Tralasciando la parte del form, alla pressione del <button> invia andrà in esecuzione lo script JS inviadati(). Analizziamo la funzione inviadati(), come prima cosa prendiamo la posizione in cui mettere i risultati finali dell’elaborazione quindi il div con id = ‘risposta’.
l’istruzione successiva si occupa di selezionare il form da cui estrarre i dati nel caso specifico il form con id = ‘primoform’. Ora con questo riferimento istanziamo un nuovo oggetto che conterrà tutti i campi con i relativi valori del form, con l’istruzione new FormData().
Infine con l’oggetto XMLHttpRequest() inviamo tutto allo script PHP saluta.php descritto di seguito.
<?php
$nome = $_POST['nome'];
$cognome = $_POST['cognome'];
echo "ciao ".$nome." ".$cognome." , benvenuto su questo sito";
?>Il risultato di tutto questo sara’ la stampa a video, nello spezio definito dal div risultato, della frase “ciao nome cognome benvenuto su questo sito”