jQuery ve PHP ile Basit Ajax Uygulaması
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(){
$.ajax({
type: "POST",
url: "ajax.php",
data: $('#hesapform').serialize(),
success: function(ajaxcevap){
$('#sonuc').html(ajaxcevap);
$('#hesapform')[0].reset();
}
});
return false;
});
});
ş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,..
Benzer Yazılar (bunları bilgisayar seçiyor);
- jQuery Nesne Oluşturma Yöntemleri ve Hız Testi
Merhaba. Öncelikle hepinizin Ramazan Bayramı'nı kutluyorum ve hızlı bir şekilde yazıya başlıyorum. j... - jQuery Live Metodu ve Kullanımı
Merhaba. Uzun zamandır jQuery ile ilgili yazı yazmadığımı farkettim ve benim de yeni kullanmaya başlad... - Emomatik Online
Emomatik'in online sürümünü hazırladım, girilen veriyi jQuery AJAX kullanarak post ediyor. Burdan ulaş... - Ajax Türkçe Karakter Sorunu
Çevremde sürekli Ajax kullanımı sonucunda Türkçe karakter sorunu yaşayan insanlar görüyorum. Standart... - PHP ile Google Ajax Search API Kullanımı
Merhaba, Size daha eski yazılarımda JSON'dan bahsetmiÅŸtim ve genelde sitelerin API'lerinde kullanıldığÄ...
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
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.
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?
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 …