Tips Ajax PHP : Cara Cepat Menguasai AJax PHP serta Jquery

Posted on
Mungkin masih banyak dari sahabat yang belum paham benar tetang ajax php, dan dikala ini saya akan berusaha bagi memberikan penjelasan yang lebih mendetail mengenai ajax, agar sobat seluruh gampang bagi memahaminya.
 Ajax bukan adalah bahasa pemrogram yang baru melainkan hanya adalah satu fitur yang digunakan oleh para developer, bagus menambah data, menghapus, mengupdate, tanpa menjalankan refresh page, atau redirect page.
kenapa kita harus menggunakan ajax ? Mungkin pertanyaan semacam itu akan muncul pada benak sahabat. contoh yang sangat simpel mengenai kegunaan ajax yaitu disaat kita sedang mengerjakan sebuah laman, atau sedang menginput data, menej atau hapus data di laman ,, dengan menggunakan ajax kita tak perlu lagi me refresh halaman yang mengalami perubahan data, dengan ajax proses yang dilakukan akan dikerjakan disisi server, atau sahabat dapat melihat twitter.com , coba sahabat perhatikan di bagian twitt dari folower sahabat,, akan secara otomatis bertambahkan ??? tanpa kita mesti merefresh halaman browser kita,,,!!! begitulah kegunaan ajax.
Banyak cara pun bagi dapat menghasilkan ajax ini, ada develepor yang membangun engine sendiri, pastinya menggunakan standarisasi ajax, ada pun yang menggunakan javascript plugin, seperti jquerymisalnya.
Di panduan kali ini, penulis akan menjelaskan sedikit saja bagaimana menghasilkan fitur ajax menggunakan php dan jquery. Caranya sangat-sangat gampang sekali. Kamu lumayan mengikuti syntaxnya, dan memahami alurnya. Namun sebelumnya terlebih dahulu Kamu membaca panduan saya sebelumnya mengenai pengenalan jquery.
Setidaknya diperlukan sangat tak 3 buah file minimal, pertama-tama yaitu file yang digunakan bagi mengirimdata, kemudian file yang digunakan bagi menerima data ataupun memproses data, dan yang terakhir yaitu jquery librarynya itu sendiri.
Oke disini saya mempunyai file index.php yang berfungsi pada 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>



berikutnya yaitu function.php yang digunakan pada menerima dan memproses data berisi :

<?php
echo $_POST[‘ajaxInput’];
?>

dan file yang terakhir yaitu file jquery itu sendiri saya menggunakan jquery versi 1.6.4.
Yang perlu disorot yaitu jquery script yang terdapat 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 diakhiri dengan
});

kemudian baris berikutnya yaitu :

$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();

ini berarti submit form yang tadinya disubmit secara seketika ke action formnya alihkan dengan menggunakan jquery ajax, jadi ketika diklik karenanya tak akan berpindah ke halaman action formnya. Yang terdapat malahan jquery yang mengambil alih ketika button submit di klik.
kemudian baris berikutnya yaitu : 

$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),

url berisi halaman penerima data yang akan dikirim, kemudian type POST sahabat telah tahu maknanya, dataType HTML kita lewat saja, dan yang terakhir yaitu data:($this).serialize() artinya kirimkan data yang datanya itu diambil dari input-input yang terdapat pada form.
sedangkan baris berikutnya penulis yakin Kamu telah 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’);
}
});
Selamat mencoba, jangan lupa , meninggalkan coment sahabat dibawah ini, atau share ke teman sahabat.

Leave a Reply

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