Bildiğiniz üzere normal şartlarda form işlemlerinde POST ya da GET kullandığımızda sayfamız formun action kısmında belirttiğimiz sayfaya yönlenir. Ajax’ın bize sunduğu belkide en güzel nimetlerden biri de sayfa yenilemeden işlem yapmamızı sağlamasıdır. Bunu bir örnekle pekiştirelim.
index.php dosyası
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<html> <head> <meta charset="UTF-8" /> <title>Ajax Post</title> </head> <body> <form id="gonderilenform"> <input type="text" name="gidenveri1"> <input type="text" name="gidenveri2"> <input id="buton" type="button" value="GÖNDER"/> </form> <div></div> </body> <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script> <script> $(document).ready(function(){ $("#buton").on("click", function(){ // buton idli elemana tıklandığında var gonderilenform = $("#gonderilenform").serialize(); // idsi gonderilenform olan formun içindeki tüm elemanları serileştirdi ve gonderilenform adlı değişken oluşturarak içine attı $.ajax({ url:'ajax.php', // serileştirilen değerleri ajax.php dosyasına type:'POST', // post metodu ile data:gonderilenform, // yukarıda serileştirdiğimiz gonderilenform değişkeni success:function(e){ // gonderme işlemi başarılı ise e değişkeni ile gelen değerleri aldı $("div").html("").html(e); // div elemanını her gönderme işleminde boşalttı ve gelen verileri içine attı } }); }); }); </script> </html> |
|
1 2 3 4 5 6 |
<?php extract($_POST); // extract fonksiyonu ile değişkenleri gelen isimleriyle kullanılır hale getirdik ve aldık. if($_POST){ // eğer post işlemi varsa echo "1. input : " . $gidenveri1 . "<br>2. input : " . $gidenveri2; // gelen verileri geri gönderdik. } ?> |
Yukarıda kullandığım extract(), .on() ve .serialize() fonksiyonlarını da en kısa zamanda örneklerle açıklayacağım inşallah.
Bir de php ve ajax ile gelişmiş bir örnek yapmayı ve en kısa zamanda yayınlamayı düşünüyorum.
Bir sonraki yazıda görüşmek dileğiyle.