WhoSayIn.com – Hüseyin KELEÅž

Merhaba,

Bu yazımızda JQuery kütüphanesini kullanarak örnek bir Ajax uygulaması oluÅŸturacağız. Uygulamadan özetle bahsedecek olursak formdaki 2 adet inputa girilen sayıları toplama iÅŸlemine tabi tutuyor. Ä°htiyacımız olanlar bir adet JQuery kütüphanesi Buradan indirebilirsiniz. Dosyamızı indirip sayfaya dahil etmek yerine Google‘dan dahil ediyoruz, bunun pek çok nedeni var, fakat en önemlisini açıklayalım. Kullanıcı eÄŸer daha önce sayfasına jQuery‘yi bu ÅŸekilde dahil eden bir siteye girmiÅŸse, bizim sitemize girdiÄŸi zaman tarayıcı jQuery.min.js dosyasını bir daha indirmiyor, önbellekten alıyor, böylelikle çok daha hızlı bir hizmet sunmuÅŸ oluyoruz.Åžimdi form.html adında yeni bir html dosyası oluÅŸturup kütüphaneyi sayfamıza dahil etmeliyiz, bunu da ÅŸu ÅŸekilde yapıyoruz;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Artık sayfamızda JQuery nin tüm nimetlerini kullanabiliriz. Åžimdi hemen örnek ajax uygulamamızı yapmaya baÅŸlıyoruz, ajax_fonk adında bir adet fonksiyon oluÅŸturuyoruz, bu fonksiyon formumuzu ajax.php sayfasına ajaxla post edecek ve ajax.php den dönen veriyi de “sonuc” adlı div in içerisinde gösterecek;

<script type="text/javascript">
function ajax_fonk() {
$.ajax({
type: "POST",
url: "ajax.php",
data: $('form#hesapform').serialize(),
success: function(ajaxcevap){
$('#sonuc').html(ajaxcevap + '<br />').slideDown('slow');
 }
 });
}
</script>

Sayfamıza bir adet form ekliyoruz, fonksiyon bu formdaki bilgileri ajax.php ye post ediyor;

<form id="hesapform" name="hesapform" action="javascript:ajax_fonk();">

<label for="s1">Sayı 1</label>
<input id="s1" name="s1"><br />

<label for="s2">Sayı 2</label>
<input id="s2" name="s2"><br />

<label for="topla"></label>
<input id="topla" name="topla" value="Sayıları Topla" type="submit"></input>
</form>

<div id="sonuc"></div>

Gördüğümüz gibi hesapform adlı formun action eventinde daha önce yazdığımız fonksiyonu çağırıyoruz ve formu ajaxla post etmiÅŸ oluyoruz. Bir de “sonuc” adında boÅŸ bir div oluÅŸturduk, sonucu bu div in içerisinde göstereceÄŸiz. html sayfamız ÅŸimdilik bitti, ÅŸimdi ajax.php sayfamıza geçiyoruz, burda formdan gelen verileri toplama iÅŸlemine tabi tutacağız ve sonucu göstereceÄŸiz; ajax.php adında bir php sayfası oluÅŸturuyoruz, içeriÄŸi şöyle;

<?php
     $s1 = $_POST['s1'];
     $s2 = $_POST['s2'];

     if ((!($s1==""))or(!($s2==""))) {
         $sonuc = $s1 + $s2;
         echo $sonuc;
     }
?>

Herşeyi eksiksiz yaptıysak sorunsuz bir şekilde çalışması lazım.

Özetle ne yaptığımızı anlatalım, $s1 ve $s2 adında 2 değişken oluşturuyoruz ve formdan gelen verileri bu değişkenlere atıyoruz. daha sonra bu verilerden herhangi birisinin boş olup olmadığını kontrol ediyoruz, eğer ikisi de doluysa bu 2 sayıyı toplayıp sonucu $sonuc değişkenine atıyoruz ve echo komutuyla sayfaya basıyoruz.

Uygulamanın çalışır haline burdan ulaşabilirsiniz.

Bir dahaki yazımızda görüşmek üzere, hoşçakalın,..