Nejprve vytvoříme základní script, který nám bude generovat data – date.php
<?php
$ret = array(); //vytvoření pole
$ret['cas'] = date("H:i:s"); //přidání času
$ret['datum'] = date("Y-m-d"); //přidání data
echo json_encode($ret); //zakódovat do JSONu
?>
Nyní vytvoříme HTML soubor, do kterého budeme data načítat – index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="PSPad editor, www.pspad.com"> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script src="jsonQuery.js" type="text/javascript"></script> <title></title> </head> <body> <a href="#" id="obnovdata">Obnov čas</a> <div id="data"></div> </body> </html>
Odkaz s id obnovdata bude po kliknutí načítat data do bloku s id data. Nyní již vytvoříme pouze jQuery script, který se o načítání postará – jsonQuery.js
// JavaScript Document
$(document).ready(function(){
// po kliknutí na obnov data zavolej
$('#obnovdata').live('click', function(){
// získej data v JSON formátu ze scriptu date.php
$.getJSON('date.php', function(data) {
//do divu s id "data" zmeň obsah na daný formát
$('#data').html("<p>Cas="+data.cas+" Datum="+data.datum+"</p>");
});
});
});
DÚ – JSON svázaný s DB, načítat postupně data po třech.
Ukázka zpracování data z databáze výpis dat po třech řádcích.