pada artikel sebelumnya telah dibahas mengenai parsing data dari array hasil query menjadi JSON. sekarang akan dibahas lebih lanjut agar data JSON tadi bisa tampil pada halaman website.
sebenarnya sama saja dengan code pada artikel sebelumnya, hanya saja sedikit dimodifikasi sesuai dengan data yang akan ditampilkan.
ambildata.php
<?php
mysql_connect('localhost','root','');
mysql_select_db('latihan');
$data = mysql_query("SELECT * from chat");
$json = '{"data":[ ';
while($x = mysql_fetch_array($data)){
$json .= '{';
$json .= '"id_chat":"'.$x['id'].'",
"from":"'.strip_tags(trim($x['from'])).'",
"to":"'.strip_tags(trim($x['to'])).'",
"sent":"'.strip_tags(trim($x['sent'])).'",
},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
$json .= '}';
echo $json;
?>
lalu ini kode dari tampilannya
<html>
<head>
<title>json + jquery</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var i;
var from = new Array();
var to = new Array();
var sent = new Array();
function view() {
$.ajax({
url: 'ambildata.php',
dataType: 'json',
cache: false,
success: function(msg){
for(i=0;i<msg.data.length;i++){
from[i] = msg.data[i].from;
to[i] = msg.data[i].to;
sent[i] = msg.data[i].sent;
$('#hasil_json').html('<p> FROM: ' + from + '</p>');
$('#hasil_json').append('<p>TO : ' + to+ '</p>');
$('#hasil_json').append('<p> SENT: ' + sent+ '</p>');
}
}
});
}
view();
});
</script>
</head>
<body>
<div id='hasil_json'></div>
</body>
</html>
untuk plugin jquerynya bsa d download di http://jquery.com/download/
selamat mencoba semoga bermanfaat :D
No comments:
Post a Comment