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:

$.ajax (url, [opzioni]);

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:



Opzioni Tipo Descrizione
accepts Oggetto Oggetto che ci si aspetta di ricevere come risposta. Il default dipende dal 'datatype'. 
async Booleano Per default, tutte le richieste sono inviate in modo asincrono. Impostare a FALSE se si richiede l'invio sincrono che bloccherà la pagina sino a fine chiamata.
beforeSend Funzione Funzione di callback che verrà eseguita prima che la richiesta Ajax request sia inviata.
cache Booleano Indica se usare la cache del browser. Default è TRUE.
complete Funzione Funzione di callback che verrà eseguita al termine della chiamata indipendentemente dall'esito.
contentType Booleano/Stringa Tipo di contenuto inviato al server. Il default è 'application/x-www-form-urlencoded; charset=UTF-8'.
crossDomain Booleano Con TRUE si forza una richiesta cross-domain nello stesso dominio. Per esempio permette un reindirizzamento lato server verso un differente dominio.
data Oggetto / Stringa / Array Dati da inviare al server. Possono essere un oggetto JSON, una stringa o un array.
dataType Stringa Tipi di dati attesi di ritorno. Possono essere:  'xml', 'html', 'script', 'json', 'jsonp' e 'text'. jQuery tenta di determinarlo automaticamente.
error Funzione Funzione di callback che verrà eseguita in caso di errore.
global Booleano Indica se la chiamata deve innescare uno degli eventi globali (quelli che vengono attivati da una qualsiasi chiamata ajax). Il default è TRUE.
headers Oggetto Un oggetto di ulteriori headers (coppie chiave-valore) da inviare con la richiesta.
ifModified Booleano La richiesta sarà considerata conclusa con successo solo se i dati restituiti sono diversi da quelli della precedente chiamata. Default:FALSE.
isLocal Booleano Dice che il protocollo deve intendersi locale anche se non riconosciuto per default (es. filesystem).
jsonp Stringa / Booleano Cambiare il nome della funzione di callback in una richiesta JSONP. Invece del nome 'callback' verrà usata la stringa indicata con 'callback=?< stringa>'.
method Stringa Può essere 'POST', 'GET', 'PUT'. Default: 'GET'.
mimeType Stringa Stringa contenente un mime-type per sostituire quello di XMLHttpRequest.
password Stringa Password se richiesta dal server.
processData Booleano Indica se i dati indicati nell'opzione 'data' devono essere convertiti in una stringa di query. Default è TRUE.
statusCode Oggetto Un oggetto JSON che contiene codici numerici HTTP e relativa funzione da richiamare quando la risposta riporta il codice corrispondente.
success Funzione Funzione di callback che deve essere eseguita quando la richiesta Ajax è stata eseguita con successo.
timeout Numero Tempo in millisecondi prima che la richiesta sia considerata scaduta.
type Stringa Tipo di richiesta HTTP da effettuare. Default: GET.
url Stringa URL a cui mandare la richiesta.
username Stringa Nome utente se richiesto dal server.
xhr Funzione Una funzione di callback per personalizzare l’oggetto XMLHttpRequest del browser.

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.
 

 

 

Commenti

(Occorre fare login per commentare - Se non sei registrato puoi farlo cliccando su "accedi")