Menggunakan Ajax dengan JQuery
jquery.ajax()
Digunakan untuk melakukan request HTTP secara asynchronous.
Syntax:
$.ajax({
type: “metode_pengiriman_data”,
url: “file_tujuan.php”,
data:“variabel_yang_dikirim”,
success: function(data){
data_yang_dikembalikan
});
}
Keterangan:
- type adalah tipe dari metode pengiriman data yaitu POST atau GET, Defaultnya GET.
- url adalah file tujuan pengiriman data, file ini mempunyai extensi .php
- data adalah variabel yang akan dikirim ke file yang terdapat pada url(lihat nomor 2)
- success, metode ini mempunyai bentuk success(data, textStatus, XMLHttpRequest), metode akan memanggil fungsi jika pengiriman data dan pengembalian data berhasil.
Contoh Kasus:
Saya ingin membuat pilihan kota seperti berikut ini:
| Pilih Kota: |
Jadi saat saya mengklik kota Jakarta maka akan keluar pilihan seperti dibawah ini:
| Wilayah: |
Dan jika saya mengklik kota Jawa Barat maka akan keluar pilihan seperti dibawah ini:
| Wilayah: |
Pertanyaan:
Bagaimana cara membuatnya … ?
Jawaban:
Ikuti langkah beirkut ini:
Membuat File HTML
Buatalah file html bernama kota.html dengan isi seperti berikut ini:
<html>
<body>
<script type=”text/javascript” src=“jquery-1.4.2.js”></script>
<script>
function fungsiAjax(){
pilihan=document.pilih.kota.selectedIndex
kt=document.pilih.kota.options[pilihan].value
$.ajax({
type: “GET”,
url: “kota.php”,
data:“kota=”+kt,
success: function(data){
$(“#wilayah“).html(data);
},
}
);
}
</script>
<form name=‘pilih’>
Pilih Kota:
<select name=‘kota’ onchange=‘fungsiAjax()’>
<option value=“jak”>Jakarta</option>
<option value=“jabar”>Jawa Barat</option>
</select>
<div id=“wilayah”></div>
</form>
</body>
</html>
Membuat File PHP
Lalu buatlah satu file php bernama kota.php dengan isi seperti berikut ini:
<?php
$kota=$_GET[‘kota’];
if($kota==“jak”){
$wilayah=”Nama Wilayah: <select name=’ibukota’><option value=’jak-sel’>Jakarta Selatan</option>”;
$wilayah.=”<option value=’jak-bar’>Jakarta Barat</option>”;
$wilayah.=”<option value=’jak-tim’>Jakarta Timur</option>”;
$wilayah.=”<option value=’jak-ut’>Jakarta Utara</option></select>”;
}elseif($kota==“jabar”){
$wilayah=”Nama Wilayah: <select name=’ibukota’><option value=’bgr’>Bogor</option>”;
$wilayah.=”<option value=’bd’>Bandung</option></select>”;
}
echo $wilayah
?>
Setelah selesai maka kamu bisa mencobanya, apakah sudah sukses atau belum … ?
Jika Tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.