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 atau nama file di server yang akan kita ambil atau panggil
Parameter data bersifat opsional, adalah pasangan key dan value yang dikirim ke server.
Parameter callback bersifat opsional, adalah fungsi yang dieksekusi jika data diambil.
Contoh :
Misal kita punya file data.txt, yang isinya :
Hai ini adalah konten dari file data.txt
Lalu kita buat kode ajax untuk me-load konten dari data.txt, berikut contoh kode contohload.html
<html> <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 Ini</button> </body> </html>Dari contoh di atas, pertama-tama kita ambil file jquery.js 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 dan memasukkannya ke dalam innerHTML <div id=”teks”>.
Sekarang mari kita lihat contoh jika memanggil file berupa PHP dan mengirim kan beberapa data atau parameter untuk diolah di sisi server.
contohload2.html
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#tombol").click(function(){ $('#teks').load("data.php","nama=desrizal&email=drz@desrizal.com",beritahu()); }); }); function beritahu(){ alert("sudah diambil datanya"); } </script> </head> <body> <div id="teks"> </div> <button id="tombol" type="button">Click Me</button> </body> </html>Pada contoh di atas kita melakukan request ke server untuk memanggil file PHP data.php dan mengirimkan parameter-parameter dan nilainya dengan metode GET. Kemudian meng-eksekusi fungsi beritahu().
<?php echo "Anda mengirim parameter nama dengan nilai : <b>".$_GET['nama']."</b> <p>"; echo "Email : <b>".$_GET['email']."</b>."; ?>Download Source Code
Sumber : Web Development - drzpost.com
No comments:
Post a Comment