Ajax Dengan Php Dan Jquery

16 views

Hai, ini yakni goresan pena pertama aku di Jagocoding.com. baiklah pribadi saja.. 

Ajax merupakan satu fitur yang dipakai oleh para developer, baik menambah data, menghapus, mengupdate, tanpa melaksanakan refresh page, atau redirect page.

Banyak cara juga untuk sanggup menghasilkan Ajax ini, ada develepor yang menciptakan engine sendiri, tentunya memakai standarisasi ajax, ada juga yang memakai javascript plugin, seperti jquery misalnya.

Di tutorial kali ini, aku akan menjelaskan sedikit saja bagaimana menghasilkan fitur ajax memakai php dan jquery. Caranya sangat-sangat gampang sekali. Anda cukup mengikuti syntaxnya, dan memahami alurnya. Setidaknya diharapkan paling tidak 3 buah file minimal, pertama yakni file yang dipakai untuk mengirim data, kemudian file yang dipakai untuk mendapatkan data ataupun memproses data, dan yang terakhir yakni jquery librarynya itu sendiri.

Oke disini aku mempunyai 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 yakni function.php yang dipakai dalam mendapatkan dan memproses data berisi :

<?phpecho $_POST['ajaxInput'];?>

 

Dan file yang terakhir yakni file jquery itu sendiri aku memakai jquery versi 1.6.4. Dari file ini tidak ada yang perlu diubah.

Pembahasan File Di Atas

Yang perlu disorot yakni jquery script yang ada dibagian headnya. yaitu, Jquery action selalu diawali dengan : 

$(document).ready(function(){

Dan diakhiri dengan : 

});

Kemudian baris selanjutnya yakni :

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

Ini berarti submit form yang tadinya disubmit secara pribadi ke action formnya alihkan dengan memakai jquery ajax, jadi dikala diklik maka tidak akan berpindah ke halaman action formnya. Yang ada malahan jquery yang mengambil alih dikala button submit di klik.

Kemudian baris selanjutnya yakni : 

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

Url berisi halaman akseptor data yang akan dikirim, kemudian type POST anda sudah tahu maknanya, dataType HTML kita lewat saja, dan yang terakhir yakni data:($this).serialize() artinya kirimkan data yang datanya itu diambil dari input-input yang ada dalam form.

Sedangkan baris selanjutnya aku 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’);}});

Oke, selamat mencoba artikel ajax dengan php dan jquery.

 

Jika kurang faham sanggup ditanyakan di komentar

Author: 
    author
    No related post!