Chiamate Ajax con jQuery via Php

Chiamate Ajax con jQuery via Php

Da -
22125
23
CONDIVIDI
Più giorni passano e più siamo abituati a consultare pagine web sempre più complesse e ricche di dati, molto spesso, infatti, per gestire una mole enorme di informazioni si fa affidamento ad ajax che, grazie ai suoi metodi “chiama” del contenuto secondario in un dato momento, più in particolare quando viene fatta una richiesta (click, change, load, quello che è). Questo consente di velocizzare il caricamento della pagina stessa mostrando lo stesso contenuto. Un esempio concreto e diffuso è l’utilizzo di una drop down list divisa per regione, città e provincia; scagli la prima pietra chi di voi non ha mai compilato un form dati in auto completamento: seleziono la regione (Puglia) e mi compaiono di botto tutti i comuni (Bari, Brindisi, Foggia, Lecce, Taranto) evitando di scorrere tra centinaia di città avendo cosi una profilazione dati molto più coerente. Il tutorial che sto per illustrarvi è il modo più semplice ed efficace per fare tutto ciò utilizzando Ajax con jQuery via PHP.

Il tutorial

Quello che ho realizzato è un file PHP che si collega ad un database contenente 2 tabelle: Nazioni e Capitali relazionate fra loro, aprendo il file noterete una lista di alcune nazioni, cliccando su una di esse partirà la chiamata Ajax che fa comparire in output la rispettiva capitale;

Prerequisiti

Il tutto è facilitato per chi è in possesso dei seguenti requisiti:

  • Buona conoscenza javascript e jQuery;
  • Conoscenza minima del linguaggio Sql;
  • Buona conoscenza di PHP;

jQuery Post

E’ la funzione che mi permette di fare tutto ciò: effettua una richiesta al server utilizzando il metodo POST.

$.post('file.php',  'parametri in post','funzione di ritorno', 'json');

Come l’esempio mostra accetta 4 parametri (in teoria alcuni in più ma per il momento è sufficiente questo):

  • Il primo, obbligatorio, contiene il file fisico php dove all’interno vi sarà il codice con la query che restituisce le capitali;
  • Il secondo, facoltativo, contiene un set di variabili da passare in POST. Esempio: {ID : 1};
  • Il terzo parametro, obbligatorio, sarebbe una funzione javascript di ritorno,
  • Il quarto parametro è una costante, JSON è un formato per lo scambio dati, sostanzialmente testo. Semplicemente si avvisa jQuery che per questo scambio si utilizza il formato JSON.

Per schiarire un pò le idee ecco uno schema riassuntivo del funzionamento di jQuery post in questo script:

  • Click sull’elemento;
  • Parte la richiesta Ajax con $.post();
  • Viene chiamato in causa il file che esegue la query;
  • Il risultato di questa query viene restituito tramite funzione di ritorno.

    • Funzionamento

    Basilarmente avremo 2 pagine:

    • “index.php”: contiene la lista delle capitali, la funzione jQuery post e la funzione di ritorno dall’ajax;
    • “json.php”: contiene la query che ha come ingresso l’ID della nazione e restituirà un set di dati (nel nostro caso il nome della capitale).

    Index.php

    Stampa delle nazioni all’interno della tabella:

    $sql = mysql_query('select * from nazioni');
echo '
      ';
while($row = mysql_fetch_array($sql)){
    echo '
    • ' . $row['nazione'] . '
      • ';
}
echo '
    ';

    Immediatamente dopo mi riservo uno spazio per un div “capitale” vuoto all’interno del quale stampo il risultato della chiamata ajax

    echo '
    ';

    Chiusa la parte PHP mi occupo di scrivere la funzione javascript che al click di una nazione effettua la chiamata ajax con jQuery Post, come parametri passo:

    • json.php: file Ajax;
    • {IDnazione: contenuto_lista}: il parametro POST IDnazione che conterrà il valore “contenuto_lista” che mi ricavo prendendo l’id corrente della nazione cliccata (this.id);
    • mostra_capitale: funzione di ritorno che spiegherò subito dopo;
    • json: formato dati convenzionale.

    Per beccare il risultato del file json.php utilizziamo la funzione mostra_capitale che accetta un parametro “data”, ad essa non faccio altro che dire di scrivere all’interno del div vuoto “capitale” precedentemente dichiarato il valore che mi ha fornito l’ajax.

    Json.php

    Molto più semplice, il file che restituirà il nome della Capitale, esso conterrà la query, in questo caso IDnazione che abbiamo chiamato nell’index.php lo gestiamo come se fosse una vera e prorpia variabile $_POST.

    $sql = mysql_query('select * from capitali where cod_IDnazione = "' . $_POST['IDnazione'] . '"');
$row = mysql_fetch_array($sql);

    E la funzione per restituire il set di dati al mittente (json_encode)

    echo json_encode($row['capitale']);

    Download

    Puoi scaricare la risorsa direttamente da qui, troverai all’interno:

    • lib/connessione.php: file di connessione al database;
    • lib/jquerymin.1.6.1: jquery da includere;
    • db.rtf: database d’esempio contenente Nazioni e Capitali;
    • index.php e json.php: ne abbiamo abbondantemente parlato

    Lascio i commenti aperti per ulteriori dubbi o chiarimenti.

    ARTICOLI CORRELATIALTRO DALL'AUTORE