Merhaba arkadaşlar,
Bugün sizlere herkesin çok merak ettiği AJAX işlemlerinden bahsediyorum. AJAX işlemlerimizi jQuery JavaScript kütüphanesi ile gerçekleştireceğiz. Öncelikle jQuery kütüphanesini buraya tıklayarak indirelim. Ben bu AJAX işlemlerini PHP ile anlatacağım, aynı mantıkla ASP ile de yapabilirsiniz.
Öncelikle index.html adlı bir dosya oluşturalım ve bu dosyanın içine aşağıdaki kodları ekleyelim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="trkodlama.com" /> <title>PHP ile AJAX işlemleri</title> <script src="js/jquery-1.6.2.min.js"></script> <!-- js isimli bir klasör oluşturup indirdiğimiz jQuery kütüphanesini içine klasörün içine attık --> </head> <body> <h1>Bir Form Örneği</h1> <p>Aşağıdaki örnek bir form örneği olacak. Butona tıkladığı anda islem.php sayfasına form bilgileri POST methodu ile gönderilecektir. Ordan gelen cevaba göre sayfada işlemler gerçekleştirilecektir.</p> <form method="POST" id="girisFormu"> <p>Kullanıcı Adınız: <input type="text" name="kullanici" /></p> <p>Şifreniz: <input type="password" name="sifre" /></p> <p><input type="button" id="jQueryTetikleyicisi" /></p> </form> <p id="sonuc">Butona tıkladığınız anda bu yazı değişecek islem.php sayfasından gelen cevap yazdırılacaktır.</p> </body> </html> |
Yukarıdaki kodda daha jQuery kodlarımızı eklemedik, o nedenle butona basmanız henüz birşeyi değiştirmeyecek. Fakat alanlarımızı gerekli bölümleri oluşturduk. Şimdi yapacağımız işlem çok basit.jQueryTetikleyicisi‘ne yani butona tıkladığımız girisFormu formu serialize() fonksiyonu aracılığıyla düzenlenecek ve düzenlenmiş veriyi islem.php sayfasına göndereceğiz. Orada sanki normal bir PHP sayfaymış gibi $_POST ile gelen verileri işleyeceğiz. islem.php sayfasından bir yazı göndereceğiz ve o yazıyı sonuc isimli alana yazdıracağız. Ama ondan önce yarım kalan HTML sayfamızı tamamlayalım:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="trkodlama.com" /> <title>PHP ile AJAX işlemleri</title> <script src="js/jquery-1.6.2.min.js"></script> <!-- js isimli bir klasör oluşturup indirdiğimiz jQuery kütüphanesini içine klasörün içine attık --> <script> $(document).ready(function(){ $("#jQueryTetikleyicisi").click(function(){ var formData = $("#girisFormu").serialize(); $.post("islem.php, formData, function(data){ $("#sonuc").html(data); }); }); }); </script> </head> <body> <h1>Bir Form Örneği</h1> <p>Aşağıdaki örnek bir form örneği olacak. Butona tıkladığı anda islem.php sayfasına form bilgileri POST methodu ile gönderilecektir. Ordan gelen cevaba göre sayfada işlemler gerçekleştirilecektir.</p> <form method="POST" id="girisFormu"> <p>Kullanıcı Adınız: <input type="text" name="kullanici" /></p> <p>Şifreniz: <input type="password" name="sifre" /></p> <p><input type="button" id="jQueryTetikleyicisi" /></p> </form> <p id="sonuc">Butona tıkladığınız anda bu yazı değişecek islem.php sayfasından gelen cevap yazdırılacaktır.</p> </body> </html> |
Şimdi biraz da kullandığımız jQuery fonksiyonlarını anlatalım
$.post()
Yaptığı işlem çok basittir. Sizin belirttiğiniz sayfaya gider, eğer sayfaya post etmek istediğiniz veriler varsa onları da post eder ve isteğe bağlı olarak sayfadan gelen sonuçları alır. Biraz örnekleyelim:
|
1 |
$.post("deneme.php) |
Bu şekilde çalıştırırsanız deneme.php sayfasını arkaplanda açar ve çıkar. Herhangi bir veri post etmez. Sonuç döndürmez.
|
1 |
$.post("deneme.php, "site=trkodlama&amp;tld=com"); |
Bu ise deneme.php sayfasına site ve tld parametrelerini post eder.
|
1 2 3 |
$.post("deneme.php, "site=trkodlama&amp;tld=com", function(data){ alert(data); }); |
Bu şekilde ise sayfadan gelen sonucu alert ile ekrana yazmamızı sağlar.
.serialize(): http://togl.me/323 adresinden detaylı bilgiye ulaşabilirsiniz
.click(): http://togl.me/c9 adresinden detaylı bilgiye ulaşabilirsiniz
.html(): http://togl.me/294 adresinden detaylı bilgiye ulaşabilirsiniz
Bu kadar açıklama yeterli olmuştur. Şimdi de islem.php sayfamızı yazalım:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php /** * @author trkodlama * @copyright 2011 */ $kullanici=trim($_POST["kullanici"]); $sifre=trim($_POST["sifre"]); if(strlen($kullanici)<4){ echo "Kullanıcı adınız en az 4 karakter olmalıdır"; } elseif(strlen($sifre)<6){ echo "Şifreniz en az 6 karakter olmalıdır"; } elseif($kullanici="trkodlama.com" && $sifre="ajax"){ echo "Tebrikler başarı ile giriş yaptınız"; } else{ echo "Hatalı kullanıcı adı veya şifre"; } ?> |
Burada yaptığımız işlemler basit, sayfadan gelen verileri kontrol ettik, ona göre bir cevap verdik. Siz burda mysql kullanarak kontrollerinizi yapacaksınız. Tek fark budur.
Sorularını yorum olarak yada forumdan iletebilirsiniz, kolay gelsin arkadaşlar.
[wpdm_file id=6]
Yorumlar