10.13.00
Dengan menggunakan jQuery, kita dapat melakukan request data TXT, HTML, XML, PHP bahkan JSON dari server menggunakan metode GET atau POST.
Salah satu fungsi yang disediakan oleh jQuery yang berkaitan dengan Ajax adalah fungsi load(). Fungsi load() berfungsi untuk mengambil data dari server dan menempatkannya ke dalam elemen HTML.
Sintaks :
$(selector).load(url,data,callback)Parameter url adalah alamat di server yang akan kita ambil atau panggil
Parameter data pasangan key dan value yang dikirim ke server.
Parameter callback fungsi yang dieksekusi jika data diambil.
Contoh :
Misal kita punya file data.txt, yang isinya :
Mencoba Programming menggunakan jQuery konten dari file data.txt
Lalu kita buat kode ajax untuk me-load konten dari data.txt, berikut contoh kode load.html
<html>Dari contoh di atas, pertama adalah kita ambil file jquery.js yang dapat kamu download di www.jquery.com atau di sini. Apabila kita mengklik tombol Klik Ini, maka akan segera menjalankan fungsi load file data.txt
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tombol").click(function(){
$('#teks').load('data.txt');
});
});
</script>
</head>
<body>
<div id="teks">
</div>
<button id="tombol" type="button">Klik Saya</button>
</body>
</html>
dan memasukkannya ke dalam HTML <div id="teks">.
Contoh jika memanggil file berupa PHP dan mengirimkan beberapa data atau parameter untuk diolah di sisi server.
load2.html
<html>Pada contoh di atas kita melakukan request ke server untuk memanggil file PHP data.php dan mengirimkan parameter dan nilainya dengan metode GET.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tombol").click(function(){
$('#teks').load("data.php","nama=greget5kali&email=greget5kali@gmail.com",beritahu());
});
});
function beritahu(){
alert("sudah berhasil diambil datanya");
}
</script>
</head>
<body>
<div id="teks">
</div>
<button id="tombol" type="button">Click Me</button>
</body>
</html>
Kemudian meng-eksekusi fungsi beritahu().
<?php
echo "Anda mengirim parameter nama : <b>".$_GET['nama']."</b> <p>";
echo "Email : <b>".$_GET['email']."</b>.";
?>
[source]
Tidak ada komentar
Posting Komentar