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:

  1. type adalah tipe dari metode pengiriman data yaitu POST atau GET, Defaultnya GET.
  2. url adalah file tujuan pengiriman data, file ini mempunyai extensi .php
  3. data adalah variabel yang akan dikirim ke file yang terdapat pada url(lihat nomor 2)
  4. 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‘.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *