jQuery ve PHP ile Basit Ajax Uygulaması

Pazar, 05 Tem 2009 yorum ekle yorumlara git

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 tutacağız. İ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. Ayrıca bandwidth’ten ufak da olsa bir kazanç elde ediyoruz. Şimdi form.html adında yeni bir html dosyası oluşturup kütüphaneyi sayfamıza dahil etmeliyiz, bunu da aşağıdaki kodu <head> blokları arasına yazarak yapıyoruz;

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

Bu kod sayesinde sitenize jQuery, 2.0 sürümüne geçinceye kadar her zaman en son sürümünü dahil etmiş olursunuz.

Artık sayfamıza bu kodu eklediğimize göre jQuery nin tüm nimetlerinden faydalanabiliriz. Şimdi hemen örnek ajax uygulamamızı yapmaya başlıyoruz.

Sayfamıza hesapform adında bir adet form ve sonuc adında bir div ekliyoruz, birazdan yazacağımız JavaScript kodu ile bu formdaki bilgileri ajax.php ye post edeceğiz, ve geri dönen veriyi de sonuc adındaki div içerisinde göstereceğiz, tabi ki ajax ile ;)

<form id="hesapform" method="POST" action="ajax.php">

<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ı formu normalde nasıl oluşturuyorsak o şekilde tekrar oluşturduk. Asıl olay javascript kısmında. Şimdi o kısma geçiyoruz, yazmamız gereken kod şöyle;


jQuery(document).ready(function(){
    $('#hesapform').submit(function(e){
        e.preventDefault();

        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: $('#hesapform').serialize(),
            success: function(ajaxcevap){
                $('#sonuc').html(ajaxcevap);
                $('#hesapform')[0].reset();
            }
        });
    });
});

şimdi ajax.php sayfamıza geçiyoruz, burda formdan gelen verileri toplama işlemine tabi tutacağız ve sonucu echo komutuyla basacağız; ajax.php adında bir php sayfası oluşturuyoruz, içeriği şöyle;

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

 if ($s1 && $s2)
 echo $s1 + $s2;

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,..


Paylaş:
  • Facebook
  • FriendFeed
  • Twitter
  • del.icio.us
  • Digg
  • StumbleUpon
  • Technorati
  • LinkedIn
  • MySpace
  • BlinkList
  • Reddit
  • RSS
  • email
  • PDF

Benzer Yazılar (bunları bilgisayar seçiyor);

Categories: Ajax, JavaScript, PHP, Programlama, jQuery 16.372 Gösterim
  1. Serkan
    Salı, 06 Eki 2009 zamanında 21:29 | #1

    Faydalı bir yazı olmuş. Ya benim aradığım şey mesela sayfaya yorum eklendiğinde sayfa yenilenmeden yorumun sayfaya eklenmesi. Anladığım kadarıyla ajax ile oluyormuş. Ama bir türlü bulamadım. Bana yardımcı olursanız sevinirim . emailadresim:serkandaglioglu@hotmail.com

  2. Kayhan Kayıhan
    Pazartesi, 23 Kas 2009 zamanında 17:28 | #2

    forum un action na fonksyon tanımlamak pek tavsiye edilmiyor, genelde buton onclick e fonksyon yazmak daha çok tavsiye edilen bir durum..
    tabi isteyen arkadaşlar bu şekilde de kullanabilir ancak dedigim gibi pek tavsiye edilmiyor.

  3. Cetin
    Cuma, 02 Nis 2010 zamanında 18:48 | #3

    Merhaba,

    belki konuyla alakasi cok yakin degil ama, sizden bir bilgi isteyebilir miyim? form verilerini alirken ve kaydederken, olusabilecek saldirilara karsi kullanmami tavsiye edebileceginiz güzel bir filtre var mi?

  4. samet kuru
    Perşembe, 22 Nis 2010 zamanında 11:44 | #4

    bu örneğinizi ie 6da deniyorum..çalışıyo.. fakat kodları kopyalayıp dosyalar oluşturup knedi servrime atıyorum. sonuç ?. şeklinde geliyo.. yani sanırım bunun sebebi karakter problemi deil..çünkü çok araştırdım denedim olmadı düzeltemedim.serverdan kaynaklı bi problem ama nedir o problem bilmiyorum bu konuda bir bilginiz varmı??yardımcı olursanız sevinirim …

  5. Burak
    Cumartesi, 13 Kas 2010 zamanında 22:04 | #5

    bu scriptin bir benzerini yapıyordum birkaç problem yaşadım, araştırıken burayı buldum,şimdi sizin burdaki ajax yapınız isteneni vermiyor.
    ben 2 sayının toplamını ajax.php sayfasında değil form.php sayfasında formun hemen altında istiyorum, dikkat ederseniz, siz de de sayfa ajax.php ye yönleniyor ki form action’a zaten ajax.php vermişsiniz.

  6. Orhan Gazi KILIÇ
    Çarşamba, 05 Ara 2012 zamanında 14:02 | #6

    Burak arkadaşın dediği gibi bir problem var zaten ajax.php de yapılıyor işlemler ve oraya yönleniyor bizim istediğimiz ve ajax’ın vaadettiği sayfanın sadece değiştirilecek olan kısmının yenilenerek işlemlerin yapılması.

  7. Perşembe, 06 Ara 2012 zamanında 11:03 | #7

    @Orhan Gazi KILIÇ
    Merhaba, sayfada ufak bir syntax hatası vardı, şu an düzelttim. Tekrar deneyebilirsiniz.

  8. Ahmet Atakan
    Pazartesi, 20 Oca 2014 zamanında 07:43 | #8

    Burak :
    bu scriptin bir benzerini yapıyordum birkaç problem yaşadım, araştırıken burayı buldum,şimdi sizin burdaki ajax yapınız isteneni vermiyor.
    ben 2 sayının toplamını ajax.php sayfasında değil form.php sayfasında formun hemen altında istiyorum, dikkat ederseniz, siz de de sayfa ajax.php ye yönleniyor ki form action’a zaten ajax.php vermişsiniz.

    Çok doğru söylemiş arkadaş. O yazdığın JQuery kodu hiç bir yerde kullanılmıyor. Konunun başlığı “PHP ile POST işlemi” veya “Form ile POST tipinde veri gönderilmesi” olmalı. JQuery veya Ajaxla hiç bir işlem yapılmamış. Vakit kaybı.

  9. Pazar, 04 May 2014 zamanında 17:08 | #9

    Ahmet Atakan :

    Burak :
    bu scriptin bir benzerini yapıyordum birkaç problem yaşadım, araştırıken burayı buldum,şimdi sizin burdaki ajax yapınız isteneni vermiyor.
    ben 2 sayının toplamını ajax.php sayfasında değil form.php sayfasında formun hemen altında istiyorum, dikkat ederseniz, siz de de sayfa ajax.php ye yönleniyor ki form action’a zaten ajax.php vermişsiniz.

    Çok doğru söylemiş arkadaş. O yazdığın JQuery kodu hiç bir yerde kullanılmıyor. Konunun başlığı “PHP ile POST işlemi” veya “Form ile POST tipinde veri gönderilmesi” olmalı. JQuery veya Ajaxla hiç bir işlem yapılmamış. Vakit kaybı.

    ‘#hesapform’ adli formun submit event’ine JavaScript kodunu bind ettik. Boylelikle formun submit olmasi durumunda bizim yazdigimiz JavaScript kodu calisacaktir ve POST islemini Ajax uzerinden yapacaktir. Tam olarak nerede sikinti yasadiniz? Yazinin sonundaki ornek sayfda da calisir durumda.

  1. şimdilik geri bağlantı yok