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.
-
tags:
Commenti
(Occorre fare login per commentare - Se non sei registrato puoi farlo cliccando su "accedi")