Call PHP script with AJAX

Nello sviluppo di siti web è sempre più frequente la necessità (o quantomeno la scelta, se necessità non è) di evitare, se possibile il refresh di una pagina ricorrendo all'utilizzo di javascript e Ajax.

Come noto con Ajax è possibile eseguire in background uno script PHP lato server, mentre lato client l'utente continuerà ad aver di fronte la stessa pagina web.

Qui ci limiteremo a mostrare esempi relativi del metodo ajax() di jQuery, da considerarsi ormai uno standard di fatto. In questo modo si invierà al server una richiesta HTTP asincrona. La sintassi di tale metodo  è la seguente:

Le opzioni sono molte e possono essere specificate separate da una virgola. Ne vedremo negli esempi solo alcune più comuni. Tuttavia vi elenchiamo nella tabella di seguito l'elenco delle possibili opzioni:

Vediamo qualche esempio pratico:

1° Esempio: Eseguire uno script PHP con GET accettando una stringa come risposta

Supponiamo di avere nella nostra pagina da qualche parte ad esempio un bottone che innesca l'evento onclick cui associamo il nostro script:

<button type="button" onclick="CallPHP_with_TexT_Result()">EseguiScriptPHP</button>

il nostro script sarà qualcosa di simile:

<script>
    function CallPHP_with_TexT_Result() {
        wname = document.getElementById('name').value;
        $.ajax({
            url: 'mioScript.php',
            type: 'GET',
            data: { n:wname },
            dataType: "text",
            success: function(result){
                var msg="";
                if (result=="a") {
                    msg="messaggio 1";
                }
                else {
                    msg="messaggio 2";
                }
                $(#esito).html(msg);
            }
        });
    }
</script>

Supponendo che il parametro da inviare con GET sia un nome che abbiamo in un elemento html con id="name". In alternativa può essere ovviamente un parametro della funzione.

Lo script provvederà ad effettuare una chiamata ajax sul server allo script PHP chiamato 'mioScript.php' passandogli il parametro wname con una GET (praticamente chiama l'url "mioScript.php?n="+wname

Abbiamo usato l'opzione dataType per indicare che ci attendiamo una stringa come risultato della chiamata. La funzione 'success' provvederà ad inserire un testo opportuno a seconda del risultato ottenuto, in una div con id="esito".

Lo script mioScriptPHP eseguirà tutte le operazioni necessarie e quindi ritornerà il risultato con:

echo $result;

2° Esempio: Eseguire uno script PHP con GET ottenendo un oggetto JSON come risposta

Supponiamo di dover riempire una lista (tag <ul> che abbiamo identificato con un id="lista") e che per farlo dobbiamo eseguire uno script php che ci fornirà questa lista. Al solito evento onclick associamo lo script CallPhpScriptViaGET. Supponiamo che allo script php vadano passati con GET un paio di parametri e che il risultato che vogliamo ottenere sia un oggetto JSON con la lista desiderata. Il nostro script potrà essere il seguente:

<script>
    function CallPhpScriptViaGET(param1, param2) {
        let lista = $('#lista');
        lista.empty();
        $.ajax({
            url: 'PhpScript.php',
            type: 'GET',
            data: { p1:param, p2:param2 },
            success: function(result){
                var dataobj = JSON.parse(result);        //    ---> Va elaborato l'oggetto JSON di ritorno
                var data = $.map(dataobj, function(value, index) {
                    value.key = index;
                    return [value];
                });
                $.each(data, function(i, val) {
                    var temp="<li><a href='newPage.php?id="+data[i]._id+"'>"+data[i]._title+"</a></li>";
                    lista.append(temp);
                })
            }
        });
    }
</script>

Con le prime due istruzioni svuotiamo la lista. Quindi con $.ajax chiamiamo l'esecuzione sul server dello script php 'PhpScript.php' passandogli i due parametri con l'opzione 'data'.

Come detto il risultato che ci aspettiamo è di tipo JSON e quindi per elaborarlo dobbiamo inzialmente convertire l'oggetto 'result' in un array che chiamiamo 'data'. Quindi usiamo foreach per elaborare tutti gli elementi dell'array 'data' (supponendo che ogni elemento dell'array php '$array' fosse composto da due campi $array[$i]['_id'] e $array[$i]['_title']). Infine accodiamo ciascun elemento nel contenitore 'lista'.

PhpScript.php ottenuto l'array da restituire chiuderà con:

echo json_encode($array);

3° Esempio: Eseguire uno script PHP passando con POST i campi di un form.

L'unica particolarità è quella di usare 'serialize' per passare tutti i campi del form. per il resto ovviamente l'opzione 'type' riporterà 'POST'. Quindi il nostro script sarà come il seguente;

<script>
    function CheckForm() {
        $.ajax ({
            type: "POST",
            url: 'CheckForm.php',
            data: $('#form1').serialize(),
            success:  function (result) {
                // eventuali azioni
            }
        })
    }
</script>

Come detto l'opzione 'data' fa riferimento al form che abbiamo identificato con id='form1' e serializza tutti i campi del form che lo script php leggerà come di consueto con $_POST.
 

tags:  
•  Javascript
•  Ajax
•  Json
•  jQuery