Ajax ile anlık veri gönderme

13 Şubat 2014 Perşembe

Ajax ile anlık veri gönderme

Tarih: 06:40 Yazar: Unknown 6 yorum

jQuery ile ajax post işlemi yapmayı göstereceğim arkadaşlar jQuery ajax ile anlık veri gönderip alabilirsiniz.
Öncelikle kodları verip ardından açıklamak istiyorum arkadaşlar

Önce jQuery Kütüphanesini Sayfamıza Dahil edelim <

 <!DOCTYPE html>  
 <html lang="tr-TR">  
 <head>  
 <meta charset="UTF-8" />  
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>  
 </head>  
 <body>  
 </body>  
 </html>

Ardından bir form oluşturalım Ve jQuery kodlarınmızı yazıp açıklayalım

 <!DOCTYPE html>  
 <html lang="tr-TR">  
 <head>  
 <meta charset="UTF-8" />  
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>  
 <script type="text/javascript">  
 function posted(){  
 $.ajax({  
 type:'POST',  
 url:'ajax.php',  
 data:$('#vehbiakdogan').serialize(),  
 success:function(sonuc){  
   $(".yazdir").html(sonuc);  
 }  
 })  
 }  
 </script>  
 </head>  
 <body>  
 <form id="vehbiakdogan" method="post">  
 <div class="yazdir"></div>  
 <input type="text" name="isim" />   
 <input type="submit" onclick="posted(); return false;" name="gonder" />  
 </body>  
 </html>

Şimdi Kodlarımızı açıklayalım

Öncelikle $.ajax() şeklinde bir fonksiyon oluşturduk ve parametre olarakta verilerimizi göndrme şeklimizi falan girdik şimdi parametrelerimizi açıklayalım.

type : type parmatremiz verielri gönderme tipimizi tanımlar örn: post,get

url : url parametremiz verilerimizi göndereceğimiz sayfamızdır.

data : data parametremizde göndereceğimiz verilerimizi gösteriyor serialize() fonksiyonu ise bizim formdaki tüm name i dolu olan formları almamızı sağlıyor.

success : success parametremiz ise ajax işlemimiz başarılı ise ne yapacağını gösterir biz eğer başarılıysa id si yazı olan divimize ajax.php den gelen yanıtı yazdırdık

ajax.php sayfamız

 <?php  
 if(isset($_POST)){  
 echo $_POST['ad'];  
 }

Eğer ajax işlemimiz başarılıysa classı yazdir olan divimize textboxa yazdığımız veri yazacaktır.

Yayınlayan: Unknown