Vai al contenuto principale

Esempio di documento con utilizzo di AJAX e JSON

In questo documento trovi un esempio di come utilizzare AJAX e JSON per costruire una pagina prendendo i dati da due database diversi (orario lezioni e corsi). L'esempio è implementati con l'utilizzo della libreria javascript 'prototype' (http://prototypejs.org) che viene caricata in tutte le pagine di campusnet e del formato JSON (http://json.org) .
L'esempio mostra come costruire una tabella abbinando al corso il periodo di insegnamento.


DIV output

Il codice

<div id="output" style="border:1px dashed blue"></div>

<script language="javascript" type="text/javascript">

//Inizia una nuova richiesta Ajax al db lezioni
new Ajax.Request('/do/lezioni.pl/Search', {
	method: 'get',
	parameters: 'format=JSON&max=99999999',
	onComplete: function(transport) {
		//prende i dati dal server in formato JSON e costruisce l'oggetto data_lezioni che contiene tutti i campi di tutti i record
		var data_lezioni = transport.responseText.evalJSON();
		
		// Inizializza un hash per mettere le coppie chiave valore IDCORSO => PERIODO
		var semestre = new Hash();
		
		// Itera tra tutti i record e riempie l'hash semestre con i dati
		for (var i=1;i<data_lezioni.records.rec.length;i++ )  {
			semestre.set(data_lezioni.records.rec[i]._id, data_lezioni.records.rec[i].periodo);
		}

		// Inizia una nuoca richiesta Ajax al db corsi
		new Ajax.Request('/do/corsi.pl/Search', {
			method: 'get',
			parameters: 'format=JSON&max=99999999',
			onComplete: function(transport) {
				//prende i dati dal server in formato JSON e costruisce l'oggetto data_corsi che contiene tutti i campi di tutti i record
				var data_corsi = transport.responseText.evalJSON();
				
				// Inizializza la variabile html con l'header della tabella
				var html='<table border=1><tr><th>Corso</th><th>Periodo lezioni</th></tr>';

				// Itera tra tutti i record dei corsi e costruisce la lista con le associazioni Corso (Semestre)
				for (var i=1;i<data_corsi.records.rec.length;i++ )  {

					// Se per un corso il semestre non è definito il valore è 'undefined' per cui lo scrive in rosso altrimenti in blue
					if (semestre.get(data_corsi.records.rec[i]._id) == undefined)	{
						var periodo = '<font color=#cc0000>' + semestre.get(data_corsi.records.rec[i]._id) + '</font>';
					} else {
						var periodo = '<font color=#0000cc>' + semestre.get(data_corsi.records.rec[i]._id) + '</font>';
					}

					// Compone la riga della tabella
					html += '<tr><td>' + data_corsi.records.rec[i].corso + '</td><td>' + periodo + '</td></tr>';
				}

				// Chiude la tabella
				html += '</table>';
				
				// Riversa la variabile html nella DIV contenitore con ID output
				$('output').innerHTML = html;
			}
		});
	}
});

</script>
Ultimo aggiornamento: 21/09/2018 23:32
Non cliccare qui!