Invio Form in AJAX? In 25 righe Universali!

Volete inviare un’email? Modificare un profilo? Inviare un voto? Ottenere dati da una pagina esterna? Queste righe fanno Esattamente per voi!

Sempre problematici questi upload asincroni con AJAX. A dir la verità chi lo mastica bene non ha difficoltà ma chi non sa come funzionano? Beh, ci sono mille esempi li fuori, ognuno come crede meglio, ma uno script universale non si vede spesso…

QUESTA PARTICOLARE VERSIONE NON FUNZIONA CON UPLOAD DI FILE! E’ da specificare!

Tuttavia è OTTIMO per tutto il resto. Tutto. Vediamo come.

Creiamo un file (che potremo usare in ogni nostro progetto) chiamato ajaxform.php e incolliamoci queste righe dentro:

<!--RICHIESTO JQUERY! Se non lo avete togliete il commento dalla riga seguente-->
<!--<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>-->
<script type="text/javascript">
$(document).ready(function(){
 $("#ajaxform").submit(function(e){
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
        url : formURL,
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR)
        {
            //data: sono i dati ritornati dalla pagina a cui punta il form
            <? if(isset($ajaxsuccess)) echo $ajaxsuccess ?>
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            //se fallisce l'invio (non ho inserito nulla, sta a voi)
        }
    });
    e.preventDefault(); //STOPPA l'invio sincrono
 });
});
</script>

Modifichiamo l’id del nostro form in id=”ajaxform”, includiamo questo file con 

<?php include 'ajaxform.php' ?>

 e la magia avverrà!

C’è un altro particolare che ho inserito: il ritorno dei dati. Si perché quando inviamo dei dati da un form ad una pagina, quest’ultima farà delle azioni (salvare nel database i dati, inviare un email) e noi dovremo sapere se ci sono stati errori o è andato tutto a buon fine, giusto?
La variabile ‘data‘ conterrà queste risposte mentre la variabile ‘$ajaxsuccess‘ sarà quella che conterrà le istruzioni, ovvero DOVE mettere la risposta.

Esempio pratico:


//Qui diciamo che i dati ritornati andranno a inserirsi nel campo con id RISPOSTA
$ajaxsuccess = '$("#risposta").html(data);';

//Creiamo un DIV con id RISPOSTA ?>
<div id="risposta">Qui verrà inserita la risposta AJAX</div>

Abbiamo settato la variabile ajaxsuccess che contiene l’istruzione di inserire la risposta della pagina indicata nell’attributo ACTION del form nel campo con id RISPOSTA, che abbiamo creato subito sotto, ovvero il DIV.

Per ottenere questa risposta possiamo fare un semplice test. Ipotizziamo che il form rimandi alla pagina “rispostaform.php” ok? Vediamola:


if($_POST){

echo "I dati sono arrivati correttamente!;

print_r($_POST);

}

Così facendo, all’invio del form, otterremo, nel DIV con id RISPOSTA, il testo che vedete qui sopra PIU’ tutti i dati passati dal form. Sta a voi poi fare tutti i controlli, la validazione dei campi e quant’altro.

Penso che nel WEB 3.0 in cui ci stiamo avventurando l’invio asincrono dei form sia fondamentale, e con queste poche semplici righe potrete fare davvero magie!

Annunci

, , , , , , , , , , , , , ,

  1. #1 di Saddy il 18/11/2013 - 15:34

    Eccellente guida! Anni fa avrei pagato oro per avere una guida simile, ma non c’era nulla su internet (soprattutto in italiano). Ora so usare bene Ajax con jQuery, ma ti dico che una guida come la tua è oro colato per chi comincia ad usare Ajax e jQuery ! Grazie per il contributo .

    • #2 di portapipe il 18/11/2013 - 15:45

      E’ un piacere poter aiutare un programmatore in difficoltà 🙂

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: