Ajax Dengan PHP Dan JQuery
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’);
},
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’);
}
});
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
});
});
</script>
});
</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 :
<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'];
?>
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(){
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();
eve.preventDefault();
$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
});
});
</script>
});
</script>
jquery action selalu diawali dengan
$(document).ready(function(){
dan di akhiri dengan
});
kemudian baris selanjutnya adalah :
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();
$(‘#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(),
$.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’);
},
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
untuk demo silahkan kunjungi ilmuwebsite labz http://labz.ilmuwebsite.com/ajaxjquery$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
Share story
0 comments: