Corsi on-line

Passaggio di dati da jQuery a PHP tramite button

In questo post riaffronteremo un argomento precedentemente trattato in altri articoli, anche recentemente, riguardante il passaggio di parametri dal framework JavaScript jQuery ad un’applicazione basata su PHP; nel caso specifico però verrà concepito uno script il cui compito dovrà essere in pratica quello di inviare un valore da JavaScript a PHP tramite pulsante, un comune button, e di restituirlo all’interno della stessa pagina statica che lo ha inviato senza la necessità di alcun nuovo caricamento.

jQueryIn sostanza avremo:

  1. una pagina statica, denominata mittente.html contenente il codice di jQuery per l’invio del parametro e il pulsante per lo scatenamento di tale evento;
  2. un file, chiamato destinatario.php, che si occuperà di raccogliere il dato inviato tramite jQuery e di determinarne la stampa a video in mittente.html all’interno di un’apposita divbox.

Una volta che destinatario.php avrà elaborato il dato ricevuto e prodotto il comportamento conseguente:

  1. il pulsante per l’invio del parametro alla pagina dinamica verrà rimosso da mittente.html in quanto non più necessario;
  2. il valore raccolto da destinatario.php sarà visibile all’interno della divbox target indicata nel codice JavaScript tramite un apposito selettore (#risultato).

A questo punto non rimane che mostrare il codice relativo alla pagina mittente.html. Si noti che in questo caso abbiamo utilizzato il CDN di jQuery richiamando il file jquery-latest.js; tale operazione, consentita in fase di sviluppo in locale, non dovrà essere invece effettuata in produzione.

<!DOCTYPE html>
<html>
<head>
<title>Prova</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('#button_send').on('click', function () {
var msg = 'Stampa questo';
$("#risultato").load('dati.php', {messaggio : msg});
$( "#send" ).remove();
});
});
</script>
<body>
<div id="send">
<input type="button" value="Invia" id="button_send" />
</div>
<div id="risultato"></div>
</body>
</html>

Ecco invece il semplicissimo sorgente PHP che si occuperà di elaborare il parametro e di “restituirlo al mittente”:

<?php 
if(isset($_POST["messaggio"])) { 
$x = $_POST['messaggio']; 
echo $x; 
} 
?> 

Chiaramente in un’applicazione completa, più avanzata di questo semplice esempio e destinata alla pubblicazione online, sarà opportuno filtrare e sanitizzare qualsiasi dato provenga da JavaScript. Dando per scontata questa procedura, si noti invece come associando il selettore #send (quello relativo alla divbox che contiene il pulsante per l’invio del parametro a PHP) alla funzione remove() di jQuery, sia possibile rendere invisibile il button in corrispondenza dell’evento previsto, cioè il click sul pulsante stesso.

Post correlati
I più letti del mese
Tematiche