jQuery mempunyai fungsi khusus AJAX, yaitu jQuery.ajax atau penulisannya boleh disingkat menjadi $.ajax. Adapun sintaksnya sebagai berikut :
$.ajax({
type : "metode_pengiriman_data",
url : "file_tujuan",
data : variabel_yang_dikirim",
success : function (){ //apabila data berhasil dikirim
tampilkan hasilnya;
}
});
Keterangan :
- $.ajax : Fungsi Ajax yang dimiliki jQuery untuk melakukan permintaan ke server
- type : Tipe dari metode pengiriman data, ada dua metode, bisa menggunakan metode GET atau POST, nanti akan dibahas di artikel selanjutnya.
- url : File tujuan pengiriman data, bisa berupa file html, xml, atau php tapi umumnya file yang dituju adalah file php.
- data : Variabel yang akan dikirim ke file yang telah kita tentukan pada bagian url.
- success : Fungsi yang akan dijalankan apabila pengiriman data berhasil dilakukan.
Skrip formjquery.php
<html>
<head>
<script src="jquery-1-4.js"></script>
<script>
$(document).ready(function(){
$('#nama').keyup(function(){
var name = $('#nama').val();
$.ajax({
type : "POST",
url : "selamat.php",
data : 'nama=' + nama,
success : function(html){
$('#tampilkan').html(html);
}
});
});
});
</script>
</head>
<body>
Masukkan Nama anda : <input type="text" name="nama" id="nama" />
<div id="tampilkan"></div>
</body>
</html>
Skrip selamat.php
<?php
$nama = $_POST['nama'];
echo "Hai, $nama";
?>
Sekarang coba jalankan skrip formjquery.php dibrowser, kemudian isikan nama pada input teks, lalu perhatikan apa yang terjadi ? yang terjadi adalah ketika anda mengetikkan nama maka langsung ditampilkan hasilnya tanpa anda menekan tombol submit untuk memprosesnya.
penjelasan :
- Apabila anda sudah pernah mempelajari dassar-dasar JQuery, tentu anda sudah memahami hubungan antara pemanggilan #nama dan #tampilkan harus sesuai dengan selector ID yang didefinisikan dibagian body html yaitu nama dan tampilkan
- Fungsi keyup adalah fungsi yang akan memonitar apakah user mengetikkan sesuatu pada input teks
- Selanjutnya, fungsi $.ajax akan membentuk hubungan dengan server, baik itu dalam bentuk pengiriman/permintaan (request) maupun pemanggilan (call) data
- var nama = $('#nama').val(); maksudnya membuat variabel baru bernama nama yang nilainya (value) diambil dari form input teks dengan id 'nama'.
- Kemudian kirimkan nilai dari variabel nama dengan metode POST ke file selamat.php, dimana nilai dari variabel tersebut dibungkus dalam bentuk data.
Semoga anda sudah mulai memahami teknik JQuery dalam membentuk aplikasi web berbasis AJAX.
Literatur : LOKOMEDIA
0 comments :
Post a Comment