AJAX PADA JQUERY MOBILE
Banyak sekali permintaan yang datang kepada penulis perihal
bagaimana cara mudahnya menghasilkan fitur ajax dengan menggunakan jquery dan
php. Ajax merupakan satu fitur yang digunakan oleh para developer, baik
menambah data, menghapus, mengupdate, tanpa melakukan refresh page, atau
redirect page.
Banyak cara juga untuk dapat menghasilkan ajax ini, ada
develepor yang membuat engine sendiri, tentunya menggunakan standarisasi ajax,
ada juga yang menggunakan javascript plugin, seperti jquery misalnya.
Di tutorial kali ini, penulis akan menjelaskan sedikit saja
bagaimana menghasilkan fitur ajax menggunakan php dan jquery. Caranya
sangat-sangat mudah sekali. Anda cukup mengikuti syntaxnya, dan memahami
alurnya. Tapi sebelumnya terlebih dahulu Anda membaca tutorial saya sebelumnya
tentang pengenalan jquery.
Setidaknya diperlukan paling tidak 3 buah file minimal,
pertama adalah file yang digunakan untuk mengirimdata, kemudian file yang
digunakan untuk menerima data ataupun memproses data, dan yang terakhir adalah
jquery librarynya itu sendiri.
Oke disini saya memiliki file index.php yang berfungsi dalam
mengirimkan data
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0
Transitional//EN”>
<html>
<head>
<title></title>
<meta name=”” content=””>
<script type=”text/javascript”
src=”jquery-1.6.4.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();
$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
});
});?? ??? ?
</script>
</head>
<body>
<form method=”POST” id=”ajaxTest”>
<input type=”input” name=”ajaxInput” />
<input type=”submit” name=”ajaxBtn” value=”Test Button”
/>
</form>
<div id=”waiting”></div>
<div id=”result”></div>
</body>
</html>
selanjutnya adalah function.php yang digunakan dalam
menerima dan memproses data berisi :
<?php
echo $_POST[‘ajaxInput’];
?>
dan file yang terakhir adalah file jquery itu sendiri saya
menggunakan jquery versi 1.6.4.
Yang perlu disorot adalah jquery script yang ada dibagian
headnya :
<script type=”text/javascript”
src=”jquery-1.6.4.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();
$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
});
});?? ??? ?
</script>
jquery action selalu diawali dengan
$(document).ready(function(){
dan di akhiri dengan
});
kemudian baris selanjutnya adalah :
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();
ini berarti submit form yang tadinya disubmit secara
langsung ke action formnya alihkan dengan menggunakan jquery ajax, jadi ketika
diklik maka tidak akan berpindah ke halaman action formnya. Yang ada malahan
jquery yang mengambil alih ketika button submit di klik.
kemudian baris selanjutnya adalah :
$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
url berisi halaman penerima data yang akan dikirim, kemudian
type POST anda sudah tahu maknanya, dataType HTML kita lewat saja, dan yang
terakhir adalah data:($this).serialize() artinya kirimkan data yang datanya itu
diambil dari input-input yang ada dalam form.
sedangkan baris selanjutnya penulis yakin Anda sudah paham
maknanya,
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
M.Ropianto, M.Kom
NIDN.1028067804
Dosen Teknik Informatika
STT IBNU SINA BATAM
Jl. Teuku Umar - Lubuk Baja - Batam
T : 0778-425391, F :
0778-458394
Website : stt-ibnusina.ac.id
