la funzione getJSON jquery caricare dati usando JSON
Tutorial->Programmazione-tutorial->Jquery
La funzione getJSON permette di elaborare dati nel formato JSON.
Ecco un esempio di come devono essere i dati:
[{id:'0'},{id:'1'},{id:'2'},{id:'3'},{id:'4'},{id:'5'},{id:'6'},{id:'7'},{id:'8'},{id:'9'},{id:'10'}
,{id:'11'},{id:'12'},{id:'13'},{id:'14'},{id:'15'},{id:'16'},{id:'17'},{id:'18'},{id:'19'},{id:'20'}
,{id:'21'},{id:'22'},{id:'23'},{id:'24'},{id:'25'},{id:'26'},{id:'27'},{id:'28'},{id:'29'},{id:'30'}
,{id:'31'},{id:'32'},{id:'33'},{id:'34'},{id:'35'},{id:'36'},{id:'37'},{id:'38'},{id:'39'},{id:'40'}
,{id:'41'},{id:'42'},{id:'43'},{id:'44'},{id:'45'},{id:'46'},{id:'47'},{id:'48'},{id:'49'},{id:'50'}
,{id:'51'},{id:'52'},{id:'53'},{id:'54'},{id:'55'},{id:'56'},{id:'57'},{id:'58'},{id:'59'},{id:'60'}
,{id:'61'},{id:'62'},{id:'63'},{id:'64'},{id:'65'},{id:'66'},{id:'67'},{id:'68'},{id:'69'},{id:'70'}
,{id:'71'},{id:'72'},{id:'73'},{id:'74'},{id:'75'},{id:'76'},{id:'77'},{id:'78'},{id:'79'},{id:'80'}
,{id:'81'},{id:'82'},{id:'83'},{id:'84'},{id:'85'},{id:'86'},{id:'87'},{id:'88'},{id:'89'},{id:'90'}
,{id:'91'},{id:'92'},{id:'93'},{id:'94'},{id:'95'},{id:'96'},{id:'97'},{id:'98'},{id:99}]
In pratica si mette tra quadre tutto, e tra graffe ogni coppia di valori.
In questo modo è possibile gestire il tutto come un array.
Sarà la funzione di callback a trasformare tali dati in array.
Una esempio di pagina php per generare una notazione JSON:
<?php
echo "[";
for($a=0;$a<100;$a++)
if($a<99) echo "{id:'" . $a . "'}" .",";
else
echo "{id:" . $a . "}";
echo "]";
?>
Questo codice in php genera una notazione JSON da cui Javascript attinge per ricevere un array di 100 elementi.
Vediamo il codice Javascript per fare la richiesta, inviare i dati in get, e ricevere i dati con JSON
function testa3()
{
//test con JSON, in questo caso la funzione callback si aspetta un risultato del tipo [{id,valore},{}]
//basta indicare una funzione di callback
var id=$("#idbutton").attr("value");
$.getJSON("ricevi3.php",{id:id},prendidati );
}
function prendidati(data)
{
alert (data[0].id);
//.html() permette di mettere html dentro quel div
$("#feeds").html(data[0].id);
}
In pratica passiamo un id preso da un oggetto interno alla pagina con id #idbutton, richiamando la funzione interna prendidati, la quale riceve un array dalla pagina php ricevi3.php.
In prendidati poi mettiamo come html il primo elemento dell'array ricevuto da ricevi3.php, e con alert lo mostriamo.
In questo modo possiamo scambiare i dati da una pagina all'altra, aspettando che finisca la richiesta di dati del server, vale a dire prendidati verrà chiamata non appena finirà il caricamento dell'array.
In questo modo però non gestiamo l'errore, poiché dovremmo usare delle funzioni più native di Jquery.
Proseguiamo provando a caricare tutti i dati in una select, scenario tipico di quando si vuole ad esempio caricare province o regioni in modo dinamico.
Basta specificare una funzione per caricare i dati:
<script type="text/javascript">
function testa4()
{
//basta indicare una funzione di callback
$.getJSON("ricevi3.php",loadItems ); //in questo caso passiamo come secondo par la funzione di callback
}
function loadItems(itemList) {
// $('#itemsControl').get(0) si usa per fare riferimento alla select con id itemsControl
if (!itemList) return;
$('#itemsControl').empty(); //per svuotare...
for(var n = 0; n < itemList.length; n++) {
$('#itemsControl').get(0).add(
new Option(itemList[n].name,itemList[n].id),
document.all ? 0 : null
);
}
}
</script>
Esempio
Con questa variante aggiungiamo effetto di scompare e appare :
function loadItems(itemList) {
// $('#itemsControl').get(0) si usa per fare riferimento alla select con id itemsControl
if (!itemList) return;
$('#itemsControl').fadeOut(2000);
$('#itemsControl').empty(); //per svuotare...
for(var n = 0; n < itemList.length; n++) {
$('#itemsControl').get(0).add(
new Option(itemList[n].name,itemList[n].id),
document.all ? 0 : null
);
}
$('#itemsControl').fadeIn(2000);
}
