Chiamate Ajax con jQuery via Php

Chiamate Ajax con jQuery via Php

6110
26
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.

1
$.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:

    1
    2
    3
    4
    5
    6
    
    $sql = mysql_query('select * from nazioni');
    echo '<ul>';
    while($row = mysql_fetch_array($sql)){
        echo '<li id="' . $row['IDnazione'] . '">' . $row['nazione'] . '</li>';
    }
    echo '</ul>';

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

    1
    
    echo '<div id="capitale"></div>';

    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.
    1
    2
    3
    4
    5
    6
    7
    8
    
    <script type="text/javascript">
        jQuery(function(){
            jQuery('ul li').click(function(){
                var contenuto_lista = this.id;
                 jQuery.post('json.php',  {IDnazione: contenuto_lista}, mostra_capitale, 'json');
            });
        });
    </script>

    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.

    1
    2
    3
    4
    5
    6
    7
    
    <script type="text/javascript">
        function mostra_capitale(data){
            jQuery(function(){
                jQuery('#capitale').html(data);
            })
        }
    </script>

    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.

    1
    2
    
    $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)

    1
    
    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.

    • Armando

      Ciao,
      complimenti per il tutorial però non è per questo che lascio un commento, fortunatamente so di cosa stiamo parlando ed in merito a questo voglio cercare di capire un pò meglio su cosa si basa il formato json dato che spesso il json_encode restutuisce valore NULL per via di stringhe non alfabetiche o caratteri speciali nel testo….a parte il fatto che non riesco ancora a capire quale alternativa c’è al json_encode per questo tipo di soluzioni (ho trovato un pò di patch in giro per il web ma nessuna ha dato esito positivo).

      Grazie per l’aiuto

    • emporioDev

      $.post è un valido sostituto all’ajax….funge alla grande! Tnx

    • paolo

      cosa è jquery min?

    • emporioDev

      “min” sta per minified, ossia la versione compressa, sgombra di spazi di un file. Serve per guadagnare spazio in termini di Kb.

    • Mario Concina

      @Armando
      scusa il ritardo nella risposta, per ovviare a questo problema dovresti, nel file che restituisce la chiamata ajax, prima della query settare un charset che vada bene per tutto, ad esempio UTF-8:
      mysql_query(‘SET CHARACTER SET utf8’);

    • Emporiodev

      uuuh stesso mio problema; avevo risolto con un toll che si chiama “json wrapper” però non è perfetto.

    • tegatti

      Salve, vorrei prendere spunto dal tutorial per risolvere un problema che da un pò di tempo mi assilla e che ti descrivo:
      ho una pagina php che simula il registro del docente. All’inizio, dopo controlli e istruzioni sql, determino la o le materie di insegnamento e le sue classi. Fin qui tutto bene, viene visualizzato l’elenco della classe e una griglia dove vengono riportati i provvedimenti per ogni studente in base al giorno del mese, come valutazioni, ritardi, assenze, impreparato, ecc. Il problema inizia quando si seleziona il mese di riferimento, il giorno e le ore di lezioni da tre distinte select. A questo punto il refresh della pagina mi azzera e variabili che mi servono per eseguire un’istruzione sql che vada ad inserire o aggiornare la tabella del database.
      Ho provato con tre distinte chiamate ajax (non ho tanta esperienza in merito) ma non mi funziona.
      Per favore, potresti aiutarmi?
      Grazie in anticipo

    • giorgio

      E’ un bellissimo articolo ma sfiora appena il problema;mi spiego : Se il file json.php è fuori dominio ………..non funziona.
      I dati di ritorno nel ” sono in javascript, ma se ho necessità d’averli in PhP, cosa fare?

      • Mario Concina

        Se il file json.php è su un altro dominio non potrebbe mai funzionare per una questione di sicurezza.

        Se utilizzi jQuery.post o il metodo ajax la sintassi sulla funzione di ritorno prevede una chiamata javascript. Se vuoi utilizzare php dovresti provare ad effettuare chiamate ajax via php e non via javascript. (Tra l’altro non sono cosi sicuro che solo con php si possano effettuare chiamate asincrone).

    • st3fano

      che differernza cè tra $.post() e $.ajax() ? a questo punt nn mi è ben chiaro..parli di ajax..no?

      grazie delle spiegazioni , un saluto

      • Mario Concina

        Semplicemente, jquery.post permette di effettuare chiamate ajax attraverso metodo “post” come dice il nome stesso. Il metodo .ajax, invece, permette di fare chiamate più approfondite poich? non utilizza solo metodo post.

    • St3fano

      grazie della risposta..se non erro per dafault .ajax() utilizza il metodo GET

    • Francesco

      Ciao, ottima guida!
      Una domanda… se avessimo 2 variabili (es. IDnazione e IDcittà) come si dovrebbe fare per passare piu variabili?

      Questo è sbagliato?

       
          jQuery(function(){
              jQuery('ul li').click(function(){
                  var contenuto_lista = this.id;
                  var variabile_2 = 'pippo';
                   jQuery.post('json.php',  {IDnazione: contenuto_lista, IDcittà: variabile_2}, mostra_capitale, 'json');
              });
          });
    • Francesco

      Ho un problema però…. come faccio a leggere dalla cache??
      Cioè ogni volta che carico il contenuto su un determinato DIV compare sempre l’immagine del loading e il contenuto viene sempre caricato effettuando ogni volta le query al database etc invece di leggere dalla cache.

    • Domenico

      Ciao, innanzitutto complimenti per l’articolo che mi è stato molto utile, vorrei farti una domanda: come posso inserire un ciclo while nella funzione? Avrei bisgno di più risultati. Ho provato con:

      while($row = mysql_fetch_array($sql))
       
      {
       
      echo json_encode($row['tags']);
       
      }
    • dino

      richiesta di aiuto per modifica file:
      ho usato i due files per ottenere la lista dei ragazzi iscritti in una classe: ho l’elenco delle classi e cliccandole esce l’elenco. Naturalmente ho un database con query molti a molti (un ragazzo frequenterà più classi).. ma con questa query il file json non mi passa nulla..
      $sql_ragazzi = “SELECT anagrafica.id, anagrafica.nome, anagrafica.cognome, anno_scolastico.id_classe, anno_scolastico.anno_inizio FROM anno_scolastico INNER JOIN (anagrafica INNER JOIN collegamento ON anagrafica.id = collegamento.id_ragazzo_c ) ON anno_scolastico.id_classe = collegamento.id_classe_c
      WHERE (((anno_scolastico.id_classe)= $prova)) LIMIT 0, 30 “;

      echo json_encode($row[‘cognome’]);

      • dino

        scusate:
        dove la variabile $prova
        viene da
        $prova = $_POST[‘id_classe’];

    • dino

      risolto il problema di prima…
      ma ora ne ho un altro: al click sul nome della classe devo passare non un solo “dato” ma un array composto da nome e cognome. come fare?
      grazie!

      • La sintassi per passare più valori in post è la seguente:

        {'chiave1' : 'valore1', 'chiave2' : 'valore2', 'chiave3' : 'valore3'}
    • Simone

      Scusa domanda banale
      che differenza di utilizzo c’è tra $ajax e $post?
      Grazie

    • Giuseppe

      Ciao, ti volevo chiedere una cosa. Il tuo script restituisce solo un elemento dal database se io volessi far restituire piu elementi come posso fare?? Grazie e complimenti per lo script

    • GC

      Ciao, se invece di una sola capitale, ci fossero più città per ogni nazione ed io volessi restituire un elenco di città come potrei fare?
      io ho provato così ma non mi restituisce nulla:

      $array = array();

      $sql = mysql_query(‘select * from capitali where cod_IDnazione = “‘ . $_POST[‘IDnazione’] . ‘”‘);
      while($row = mysql_fetch_array($sql))
      {
      $p=array();
      $p[‘citta’] = $row[‘citta’];
      $array[] = $p;
      }
      echo json_encode($array);

      Grazie!
      GC