PHP ile ajax
Ajax; javascript ile internet sayfalarında sayfaları yeniden yüklemeye gerek kalmadan ve yeni sayfayalara yönlenmeden içeriklerin değişmesini sağlayan tekniğin adıdır.
Bu tekniği kullanmamız için günümüzde bir çok hazır kütüphane ve uygulamalar mevcut. Ben bunlardan en iyisi ve en popüleri olan Jquery kullanıp onun üzerinden anlatacağım.
Ajax tekniği sayesinde bir sayfayı yenilemeden o sayfa içerisindeki istediğimiz içeriği ya da varolan değerleri değiştirebiliriz. Mesela chat uygulamarı, otomatik metin tamamlayıcı, verileri sayfayı değiştirmeden kaydetme vs. gibi uygulamalar yapabiliriz.
Jquery ile ajax kullanımı
Ben bu yazıda çok basit bir örnek ile ajax kullanımı göstermek istiyorum. Eğer Jquery bilmiyorsan bunun için endişelenmene gerek yok. Jquery ile hiç bir ek anlatıma ihtiyaç olmadan bu ajax kullanımı anlayacağına emin olabilirsin. Kalıbı öğrenmen yeterli olacak.
Öncelikle çalışmamıza ister buradan son sürümünü indirip kendi sunucumuza yükleyerek, istersek de Google kullanarak Jquery kütüphanesini yükleyebiliriz.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Bu yukarıdaki javascript kodunu sitemizin <head>…</head> etiketleri arasına eklememiz Jquery çalışmalarımızda kullanmaya başlamak için yeterli.
Jquery’de ajax kullanımı için bir çok alternatifimiz var. Bunlardan en kullanışlıları $.get, $.post, $.ajax fonksiyonları.
Bu fonksiyon isimlerini PHP’deki $_POST, $_GET değişkenleri ile bağlantılı olduklarını düşünebilirsin. Çünkü $.get fonksiyonunu kullanarak PHP dosyalarına göndereceğimiz isteklerde gönderdiğimiz değerler $_GET değişkenine yüklenecek, diğerinde ise $_POST değişkenine.
Yukarıdaki script kodunu sitemize ekledikten sonra sayfamızın içerisinde örnek çalışma için <div> bir oluşturuyoruz. Class parametresine cevap yazıp içerisini boş bırakıyoruz. Buraya yazdığımız class parametresi sonradan onu seçip içerisine doldurmamızda yardımcı olacak.
Hemen altınada bir metin kutusu ve form butonu yerleştiriyoruz. Bir form oluşturmamıza gerek yok, sadece bu iki element ile ajax uygulaması hazırlayabiliriz. Oluşturduğumuz metin kutusunun name parametresine metin değerini verdik.
Form butonuna onclick parametresi ile tıklandığında uygula() javascript fonksiyonunu çalıştırmasını istedik.
<div class="cevap"></div> <input type="text" name="metin" /><br/> <input type="button" value="Gönder" onclick="uygula()" />
Ve şimdi gelelim javascript fonksiyonumuzu yapmaya. Aslına bakacak olursanız PHP’de fonksiyon oluşturmak ile çok benzer, çünkü genel fonksiyon kullanımı neredeyse tüm programlama dillerinde diğer ifadelerinde benzer olduğu gibi aynı. Bu yüzden pek yabancılık çekmeyiz.
Oluşturacağımız script fonksiyonunu <script>…</script> etiketleri arasına yazmamız gerekiyor.
<script>
function uygula() {
metin = $('input[name="metin"]').val();
$.get('ajax.php', {yazi: metin}, function (gelen_cevap) {
$('.cevap').html(gelen_cevap);
});
}
</script>
Bu fonksiyonda ilk olarak inputlardan name parametresi metin olanı seçip javascriptde metin değişkenine atadık. Sonrasında $.get() fonksiyonu ile ilk parametrede hangi sayfadan veri alacağımızı belirttik, biz ajax.php dedik ve o sayfaya 2. parametrede yazi adında bir GET parametresi göndereceğimizi ve değerininde metin değişkeni yani metin kutusuna yazdığımız yazının olmasını istedik.
Bu durumda eğer biz metin kutusuna selam yazarsak, javascript ajax.php?yazi=selam şeklinde php uygulamamıza girmiş olacak ve çıkan sonucu bizim oluşturduğumuz içi boş divimizin içerisine yazacak.
Şimdi gelelim ajax.php uygulamamıza. Burada sadece ajax deneme amaçlı bize gönderilen metini md5 ile kodlayıp ekrana yazacağız. Bizim bu sayfada ekrana yazdırdığımız şey ajax uygulamamızda divin içerisine yazacak.
<?php $yazi = $_GET['yazi']; echo $yazi . ' MD5 kodu: ' . md5($yazi); ?>
Burada yazi değerini almamızın sebebi ajax fonksiyonumuzda bize veriyi yazi adında göndermesini istediğimizden dolayı. Şimdi son olarak ajax uygulamamızın sayfasını görelim.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
function uygula() {
metin = $('input[name="metin"]').val();
$.get('ajax.php', {yazi: metin}, function (gelen_cevap) {
$('.cevap').html(gelen_cevap);
});
}
</script>
</head>
<body>
<div class="cevap"></div>
<input type="text" name="metin" /><br/>
<input type="button" value="Gönder" onclick="uygula()" />
</body>
</html>
Bir başka sanal serüvende görüşmek üzere esen kalın.
Yazılanlar ilgini çektiyse, yenilerinden haberdar olmak için e-mail bültenine abone olabilirsin.
"PHP ile ajax" yazısı için 22 yorum yapılmış.
Bir cevap yazın
E-mail adresin ile abone olarak eklenen tüm yeni yazılardan anında haberdar olabilirsin.
Kategoriler
Son Yazılar
Son Yorumlar
on PHP dersleriÖncelikle teşekkür ederim. Cami Halısı sektöründeyim ve sizlerin sayesinde kendi sitemi kendim yapabiliyorum sorunlarımı adam akıllı bir şekilde çözebiliyorum.
Teşekkür ederim, çok güzel paylaşım.
Öncelikle ders güzel. Teşekkür ederim. İyi, hoş, güzelde sadece tek bir veri alanından ajax ile veri çekmişsiniz. Farz edin ki sayfada 30 tane veri alanı var. Ozaman şu şekilde mi olacak kodumuz:
function uygula() {
metin = $('input','textarea','radio','file').val();
$.get('ajax.php', {yazi: metin}, function (gelen_cevap) {
$('.cevap').html(gelen_cevap);
});
}
hocam her bir buton ve .sonuc için bir id belirle mesela
diğerinde
gibi…
Cok tesekkurler cok guzel yazi ajax olayini kavradim sayenizde…
[…] http://www.phpr.org/php-ile-ajax/ var twt_lb_ret = {username : 'oguzhanaslan',follower_count : '41',show_once : '5',display_on_page : '1',display_on_post : '1',display_on_home : '1',delay : '1000',exc : '[exclude]'}; […]
Gerçekten güzel anlatım, çok teşekkürler.
Saygılar..
Merhabalar benim bi sorum olacak diyelim ki ajax ile data:{‘a’:’KKK’ ,’Sifre ‘:’Sifre’ } yazıp gönderiyoruz anlamadığım şu ki php sayfamıza gönderdiğimizde ne kadar echo warsa hepside yazıyor bunun için ne yapmak lazım biri bunu acıklaya bilir mi özelliklede admin php ye veri gönderdiğimizde php sayfası olduğu gibi baştan sona mı okunuyor ve ayrıca php de birsürü işlem war sonuçlarını da echo ile yazdırmısım ajax ile sadece ilgili işlemi nasıl alabilirim yoksa switch || if mi kullanmak gerek
çok teşekkürler gayet açık ve net bir anlatım olmuş
Gerçekten çok güzel bir makale olmuş. Anlatımda bir o kadar güzel teşekkürler..
güzel bir makale sayenizde bende ajax olayını anladım. Teşekkürler. Yalnız bu kodlar ie de çalışmıyor yada ben çalıştıramadım. Firefox’ta filan çalışıyor. ie de çalışması için ne yapmamız lazım?
Internet Explorer’ın kaçıncı versiyonunda çalışmıyor acaba?
$.post() olayına bir bakın! çalışır. 🙂
genel olarak ie9 da ajax işlemleri çalışmıyor. Veri transferi yapılamıyor.
teşekur edrim hoca gercekten siteniz çok güzel
anlatımınız super tam bir egitmensiniz
sordugunuz soruya bir cevap veriyim.
windows 7 ile yuklenen explorer’de çalışmıyor hocam ama chrome da çalışıyor…..
teşekürler hocam emeginiz için
hocam çok güszel anlatmışsınız.Olayı anladım.fakat şöyle bir sorum olcak.benim index.php adında bir anasayfam var ve bu sayfada birden fazla link var ben linkler içindeki formlar vasıtasıyla veritabından ihtiyacım olanveriyi çekip sonucu tekrar index.php göstermek istiyorum..bu verdiğiniz örneği ben her link için ayrı ayrımı ajax isteği oluşturmam gerekiyor.Yoksa başka bir yolu varmı..şimdiden tşkler..
Benle ciddi bir şekilde ajax-php konusunda görüşebilecek birini arıyorum . Yardımcı olmak veya iş için farketmez benim için mesaj beklemekteyim.
Musa emeğine sağlık kardeşim
Hocam güzel anlatım olmuş elinize sağlık.
Hocam buttona basıldığında buttonun değerini değiştirmemiz mümkün mü?
her şeyi yapabilirsin, hayal gücüne kalmış
index.php?id=1234 şeklinde link yapısındaki id no’yu jquery ile nasıl post ettirebilirim?
$_GET[“id”] ile veriyi alıp ajax post ile anlatılan şekilde gönderebilirsin geri dönen veri almayacaksan $.post olarakta direk gönderebilirsin.