Chiamate Ajax con jQuery via Php

21 Giugno 2011Scritto da mario23
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.

    Scritto da mario

    Agile web e mobile developer, attraverso il blog mette in campo l'esperienza acquisita quotidianamente sul mondo del lavoro.

    23 comments

    • Armando

      21 Giugno 2011 at 22:05

      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

      Reply

    • paolo

      24 Giugno 2011 at 21:43

      cosa è jquery min?

      Reply

    • Mario Concina

      2 Luglio 2011 at 9:54

      @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’);

      Reply

    • tegatti

      2 Maggio 2012 at 9:39

      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

      Reply

    • giorgio

      26 Giugno 2012 at 12:49

      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?

      Reply

      • Mario Concina

        26 Giugno 2012 at 13:17

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

        Reply

    • st3fano

      14 Luglio 2012 at 12:59

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

      grazie delle spiegazioni , un saluto

      Reply

      • Mario Concina

        16 Luglio 2012 at 14:52

        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.

        Reply

    • St3fano

      16 Luglio 2012 at 16:38

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

      Reply

    • Francesco

      17 Dicembre 2012 at 19:11

      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');
              });
          });
      
      

      Reply

    • Francesco

      21 Dicembre 2012 at 17:36

      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.

      Reply

    • Domenico

      9 Febbraio 2013 at 2:07

      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']);
      
      }
      

      Reply

    • dino

      28 Marzo 2013 at 17:49

      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’]);

      Reply

      • dino

        28 Marzo 2013 at 17:52

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

        Reply

    • dino

      30 Marzo 2013 at 7:28

      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!

      Reply

      • Mario Concina

        7 Maggio 2013 at 10:00

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

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

        Reply

    • Simone

      12 Maggio 2013 at 15:42

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

      Reply

    • Giuseppe

      14 Giugno 2013 at 21:07

      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

      Reply

    • GC

      9 Luglio 2014 at 10:19

      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

      Reply

    Lascia un commento

    Your email address will not be published. Required fields are marked *

    https://www.fullstacksas.it/wp-content/uploads/2021/11/FULLSTACK-LOGO-MINI-150x131.png

    Via Vito Rosa, 7
    70127 Bari – IT
    P.iva – 08087100726

    Gli attrezzi del mestiere

    Full Stack Sas – p.iva 08087100726 – Rea n. BA – 603324

    Copyright 2019. Bold Themes. All rights reserved.

    bt_bb_section_top_section_coverage_image