Contoh Script pemanggilan $.ajax dengan Jquery
Berikut tutorial untuk membuat form AJAX sederhana dengan menggunakan jquery (salah satu javascript framework).
Tahap 1.siapkan html file seperti dibawah ini , save dengan nama index.htm
Kemudian buat tulisan "Loading" yang mana kita tidak munculkan terlebih dahulu saat halaman web diload, disini saya sembunyikan menggunakan CSS "display:none;" dan diapit oleh <div> yang diberi nama "loading-box" pada "id"-nya.
Mengapa masing-masing element harus diberi nama pada "id"? ini dilakukan untuk mempermudah kita saat melakukan pemanggilan element pada saat di javascript.(tidak harus semua element diberi nama, hanya element-element yang kita butuhkan saja).
Tahap 2. tambahkan script ajax berikut di baris paling bawah html sebelum tag </body>
berikut akan saya jelaskan secara bertahap penambahan scriptnya.
Cara pengambilan value dalam textbox bisa seperti diliat pada contoh diatas cukup memanggil nama "id"nya saja $("#NamaId").val(), tidak perlu panjang-panjang seperti document.form1.nama.value.
Nah, ini ada tahap terpenting dalam tutorial ini. Untuk melakukan pengiriman data dengan teknik ajax kita gunakan fungsi yang sudah disediakan oleh jquery yaitu $.ajax.
Dalam fungsi ini ada beberapa parameter utama yang harus kita set, pertama kita set bagaimana pengiriman data mau dilakukan apakah mau dilakukan secara "POST" maupun "GET" seperti layaknya FORM biasa.
Tentukan url file penerima data (seperti url pada "action" FORM), kemudian list data-data yang mau dikirimkan melalui ajax pada tag "data", yang mana tiap variable dipisahkan dengan tanda "&".
beforeSend biasanya digunakan untuk menentukan aksi apa yang mau dilakukan sebelum proses pengiriman data, dalam kasus ini kita lakukan aksi menampilkan tulisan "loading" , jadi pengguna bisa mengetahui kalau proses pengiriman sedang dilakukan/berjalan.
success , untuk menentukan aksi apa yang mau dilakukan ketika proses pengiriman data sukses dan menerima respon dari server (process/save.php). "pesan" adalah variable yang disediakan untuk menerima data yang dikirim dari server (nama variablenya tidak harus "pesan"). Pada contoh diatas, jika pesannya berisi angka "1" maka artinya sukses, selain itu proses penyimpanan data gagal. Setelah itu langsung kita sembunyikan kembali tulisan "loading", untuk memberitaukan pengguna kalau proses telah selesai.
.show() dan .hide() , adalah 2 diantara fungsi yang disediakan jquery untuk mempermudah menampilkan dan menyembunyikan suatu elemen.
untuk contoh file PHP penerima datanya bisa dilihat di bawah ini , file penerima dibawah ini hanyalah contoh sederhana saja supaya lebih mudah dimengerti.
Semoga tutorial ini dapat membantu bagi teman-teman yang baru belajar jquery :) . Untuk lebih detailnya mengenai ajax jquery bisa langsung ke website resminya dihttp://api.jquery.com/jQuery.ajax/ .
Demo Download File
Tahap 1.siapkan html file seperti dibawah ini , save dengan nama index.htm
<html>
<head>
<title>Tutorial</title>
<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
</head>
<body>
<form name="form1" method="post" action="">
<div>Nama : <input type="text" name="nama" id="nama"> </div>
<div>Umur :<input type="text" name="umur" id="umur"> </div>
<div>Email :<input type="text" name="email" id="email"> </div>
<input name="btnSave" id="btnSave" type="button" value="Save">
<div id="loading-box" style="display:none;">Loading...</div></form>
</body>
Pada tahap ini, include file javascript jquery di bagian <head> , lalu buat form yang kita perlukan. Dalam contoh ini saya sediakan 3 textbox (nama, umur, email) dan jangan lupa masing2 textbox diberi "id" unik untuk masing2 textbox.<head>
<title>Tutorial</title>
<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
</head>
<body>
<form name="form1" method="post" action="">
<div>Nama : <input type="text" name="nama" id="nama"> </div>
<div>Umur :<input type="text" name="umur" id="umur"> </div>
<div>Email :<input type="text" name="email" id="email"> </div>
<input name="btnSave" id="btnSave" type="button" value="Save">
<div id="loading-box" style="display:none;">Loading...</div></form>
</body>
</html>
Kemudian buat tulisan "Loading" yang mana kita tidak munculkan terlebih dahulu saat halaman web diload, disini saya sembunyikan menggunakan CSS "display:none;" dan diapit oleh <div> yang diberi nama "loading-box" pada "id"-nya.
Mengapa masing-masing element harus diberi nama pada "id"? ini dilakukan untuk mempermudah kita saat melakukan pemanggilan element pada saat di javascript.(tidak harus semua element diberi nama, hanya element-element yang kita butuhkan saja).
Tahap 2. tambahkan script ajax berikut di baris paling bawah html sebelum tag </body>
berikut akan saya jelaskan secara bertahap penambahan scriptnya.
<script type="text/javascript">
$(document).ready(function(){
});
</script>
Script diatas adalah awal yang harus dibuat untuk pemakaian jquery. $(document).ready(function(){
});
</script>
$(document).ready(function(){
function save_via_ajax(){
}
$("#btnSave").click(save_via_ajax);
});
Kemudian kita beri event pada tombol "btnSave". dalam code di atas artinya kalau tombol btnSave diklik maka lakukan execute proses-proses yang ada di dalam function "save_via_ajax".function save_via_ajax(){
}
$("#btnSave").click(save_via_ajax);
});
$(document).ready(function(){
function save_via_ajax(){
/* ambil data dari form */
var nama = $("#nama").val();
var umur = $("#umur").val();
var email = $("#email").val();
}
$("#btnSave").click(save_via_ajax);
});
Sekarang kita isi function save_via_ajax dengan proses-proses sesuai kebutuhan. Pertama ambil data yang diinput oleh user kemudian simpan ke dalam variable.function save_via_ajax(){
/* ambil data dari form */
var nama = $("#nama").val();
var umur = $("#umur").val();
var email = $("#email").val();
}
$("#btnSave").click(save_via_ajax);
});
Cara pengambilan value dalam textbox bisa seperti diliat pada contoh diatas cukup memanggil nama "id"nya saja $("#NamaId").val(), tidak perlu panjang-panjang seperti document.form1.nama.value.
$(document).ready(function(){
function save_via_ajax(){
/* ambil data dari form */
var nama = $("#nama").val();
var umur = $("#umur").val();
var email = $("#email").val();
$.ajax({
type:"POST",
url: "process/save.php",
data: "nama="+nama+"&umur="+umur+"&email="+email,
beforeSend: function(){
$("#loading-box").show();
},
success: function(pesan){
if(pesan==1){
alert("Data telah disimpan");
}else{
alert("Data gagal disimpan");
}
$("#loading-box").hide();
}
});
}
$("#btnSave").click(save_via_ajax);
});
function save_via_ajax(){
/* ambil data dari form */
var nama = $("#nama").val();
var umur = $("#umur").val();
var email = $("#email").val();
$.ajax({
type:"POST",
url: "process/save.php",
data: "nama="+nama+"&umur="+umur+"&email="+email,
beforeSend: function(){
$("#loading-box").show();
},
success: function(pesan){
if(pesan==1){
alert("Data telah disimpan");
}else{
alert("Data gagal disimpan");
}
$("#loading-box").hide();
}
});
}
$("#btnSave").click(save_via_ajax);
});
Nah, ini ada tahap terpenting dalam tutorial ini. Untuk melakukan pengiriman data dengan teknik ajax kita gunakan fungsi yang sudah disediakan oleh jquery yaitu $.ajax.
Dalam fungsi ini ada beberapa parameter utama yang harus kita set, pertama kita set bagaimana pengiriman data mau dilakukan apakah mau dilakukan secara "POST" maupun "GET" seperti layaknya FORM biasa.
Tentukan url file penerima data (seperti url pada "action" FORM), kemudian list data-data yang mau dikirimkan melalui ajax pada tag "data", yang mana tiap variable dipisahkan dengan tanda "&".
beforeSend biasanya digunakan untuk menentukan aksi apa yang mau dilakukan sebelum proses pengiriman data, dalam kasus ini kita lakukan aksi menampilkan tulisan "loading" , jadi pengguna bisa mengetahui kalau proses pengiriman sedang dilakukan/berjalan.
success , untuk menentukan aksi apa yang mau dilakukan ketika proses pengiriman data sukses dan menerima respon dari server (process/save.php). "pesan" adalah variable yang disediakan untuk menerima data yang dikirim dari server (nama variablenya tidak harus "pesan"). Pada contoh diatas, jika pesannya berisi angka "1" maka artinya sukses, selain itu proses penyimpanan data gagal. Setelah itu langsung kita sembunyikan kembali tulisan "loading", untuk memberitaukan pengguna kalau proses telah selesai.
.show() dan .hide() , adalah 2 diantara fungsi yang disediakan jquery untuk mempermudah menampilkan dan menyembunyikan suatu elemen.
untuk contoh file PHP penerima datanya bisa dilihat di bawah ini , file penerima dibawah ini hanyalah contoh sederhana saja supaya lebih mudah dimengerti.
<?
/* File ini untuk merespon ajax yang dikirim oleh index.htm*/
/* Simpan data kiriman ke dalam variable */
$nama=$_POST['nama'];
$umur=$_POST['umur'];
$email=$_POST['email'];
/* Proses data sesuai keinginan, apakah mau disimpan ke dalam database atau proses lainnya,contoh dibawah adalah menyimpan data ke dalam database */
mysql_connect("localhost","root",""); //konek ke database
$sql="insert into jquery_testing.peserta set
nama='".$nama."',
umur='".$umur."',
email='".$email."'
";
mysql_query($sql); //lakukan insert data ke dalam database
/* merespon ajax dengan mengembalikan sesuatu yang menginformasikan status proses, misalkan proses berhasil atau lainnya */
echo "1";
/* File ini untuk merespon ajax yang dikirim oleh index.htm*/
/* Simpan data kiriman ke dalam variable */
$nama=$_POST['nama'];
$umur=$_POST['umur'];
$email=$_POST['email'];
/* Proses data sesuai keinginan, apakah mau disimpan ke dalam database atau proses lainnya,contoh dibawah adalah menyimpan data ke dalam database */
mysql_connect("localhost","root",""); //konek ke database
$sql="insert into jquery_testing.peserta set
nama='".$nama."',
umur='".$umur."',
email='".$email."'
";
mysql_query($sql); //lakukan insert data ke dalam database
/* merespon ajax dengan mengembalikan sesuatu yang menginformasikan status proses, misalkan proses berhasil atau lainnya */
echo "1";
?>
Semoga tutorial ini dapat membantu bagi teman-teman yang baru belajar jquery :) . Untuk lebih detailnya mengenai ajax jquery bisa langsung ke website resminya dihttp://api.jquery.com/jQuery.ajax/ .
Demo Download File
Post a Comment