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:
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.
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
paolo
24 Giugno 2011 at 21:43
cosa è jquery min?
Fabio Buda Netdesign
8 Marzo 2012 at 19:15
Ciao Paolo,
jquery min non è nient’altro che jquery “minimizzato”.
Minimizzare è l’operazione che permette di ridurre il peso in Kb delle librerie javascript grazie all’eliminazione dei commenti e degli spazi bianchi, tab e newlines…
(se vuoi approfondire posso segnalarti queto link http://www.netd.it/sviluppo/come-velocizzare-un-sito-web#minimizzare-i-css-e-gli-script-javascript)
Fabio Buda Netdesign
8 Marzo 2012 at 19:16
Mario scusa,
ho commentato senza aver visto la risposta già presente e senza essermi accorto che il commento era di moltissimo tempo fa…. cancellalo pure.
🙂
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’);
Fabio Buda Netdesign
8 Marzo 2012 at 19:13
Sorry….
$.post non è un sostituto… È ajax!
😛
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
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?
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).
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
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.
St3fano
16 Luglio 2012 at 16:38
grazie della risposta..se non erro per dafault .ajax() utilizza il metodo GET
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?
Mario Concina
20 Dicembre 2012 at 10:57
è corretto!
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.
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:
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’]);
dino
28 Marzo 2013 at 17:52
scusate:
dove la variabile $prova
viene da
$prova = $_POST[‘id_classe’];
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!
Mario Concina
7 Maggio 2013 at 10:00
La sintassi per passare più valori in post è la seguente:
Simone
12 Maggio 2013 at 15:42
Scusa domanda banale
che differenza di utilizzo c’è tra $ajax e $post?
Grazie
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
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