Kali ini kita akan belajar metode paling sederhana dengan bantuan library jquery untuk mengambil data dari server. Jquery menyediakan sebuah method .load() yang akan kita pakai nanti untuk memanggil data dari file berbeda tanpa harus me-load page (refresh) kita. Kenapa tidak menggunakan show() dan hide() ?
Apabila kita menggunakan show() dan hide() jelas ini akan mengkonsumsi banyak waktu dan bandwidth user karena data akan diload semua terlebih dahulu. Bisa dibayangkan bukan ?
Tampilan akhir untuk tutorial kali ini akan seperti pada gambar di bawah ini :
<pre lang="html">
<!DOCTYPE html>
<html>
<head>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>Latihan : </div>
<div style="width:300px; float:left;">
<ul>
<li id="movie">Movie</li>
<li id="music">Music</li>
<li id="game">Game</li>
</ul>
</div>
<div id="konten" style="width:300px; float:left;">
</div>
<div style="clear:both"></div>
<script>
$("#konten").load("movie.php"); /* Load movie.php secara default pada saat file index.php dibuka */
$('#movie').click(function() {
$("#konten").load("movie.php");
});
$('#music').click(function() {
$("#konten").load("music.php");
});
$('#game').click(function() {
$("#konten").load("game.php");
});
</script>
</body>
</html>
</pre>
Pada saat pertama kali file index.php di-load, secara default kita memanggil file movie untuk pertama
kali ditampilkan.
.click merupakan method dari jquery untuk membaca apakah div id kita di-click atau tidak. Apabila di-click
maka trigger selanjutnya adalah memanggil data yang sudah kita tentukan dengan menggunakan.load(“namafile.php”);
Selamat mencoba !
Nb:
tutorial lengkap bisa dilihat di http://www.magpieweb.com/2011/12/mengambil-data-dari-server-menggunakan-load-jquery/
Sumber tulisan: http://www.diskusiweb.com/discussion/41364/mengambil-data-dari-server-menggunakan-.load-jquery/p1
Tidak ada komentar:
Posting Komentar