Öncelikle küçük bir ipucu: Jquery dosyanızı kendi bünyenizde tutmanıza gerek yok. Hem daha hızlı olması, hemde BW'den tasarruf etmek için Google API kullanarak jquery'i yüklüyoruz. Aşağıda kodunu verdim
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>Not: Google API sayfasına girerseniz Prototype'dan (sanırım böyle yazılıyordu=) ) mootools'a, jquery-ui'ye kadar birçok dosyayı barındırdığını göreceksiniz.
Şimdi bize gerekli olan 2 tane sayfa var. Bunlardan birincisi FORM'un post edileceği bir HTML sayfası ve gelen post değerlerini yorumlayacak PHP sayfamız yer alacak. Ben bunlara postgonder.html ve postal.php olarak adlandırdım. Şimdi postgonder.html dosyamızda 2 alan olsun. Ad ve Soyad alanları olarak belirledim. Postgonder.html dosyamızı hazırlayalım;
<form action="javascript:void(0);"> Adınız<br /><input type="text" name="adiniz" /><br /> Soyadınız<br /><input type="text" name="soyadiniz" /><br /> <input type="submit" value="Gönder" /> </form> <div id="sonuc"></div>Evet postgonder.html sayfamızı hazırladık. Şimdi satırları tek tek açıklayalım!
<form action="javascript:void(0);"> //Genel form tagımız bunu bilmeyen yoktur sanırım. action="javascript:void(0);" yapmamızın sebebi tıklandığında iç bir işlem yapmayacak olmasıdır.
İnputların zaten ne işe yaradığını bilmiyorsanız bu makaleyi okumanız yersiz, HTML öğrenmekle başlamalısınız.
<div id="sonuc"></div> bu DIV ise gerekli şuan boş ancak AJAX ile veri gönderdiğimizde, geri dönen veriyi bu DIV'e ajax ile yazdıracağız.
Şimdi Postgonder.html dosyamızda AJAX ile veri göndereceğimiz javascript (jquery) kodunu oluşturuyoruz.
<script type="text/javascript">
$(document).ready(function(){
$('form').submit( postgonder )
});
function postgonder()
{
$.post('postal.php', $('form').serialize(),function(veri){$('#sonuc').html(veri)});
}
</script>şimdi teker teker ne işe yaradıklarını açıklayalım.$(document).ready(function(){
//Veriler...
});Bu kodun genel amacı web sayfamız yüklenip JS kodları kullanıma hazır oldugu anda yada tetiklendiğinde çalıştırılmasını sağlar. Öyleki bizde kodumuzu şu şekilde kullandık; $(document).ready(function(){
$('form').submit( postgonder )
});Burda yaptığımız şeyi hemen açıklayalım; $('form') kısmı ile sayfadaki FORM 'u seçtik. Bunu form'a bir ID vererek $('#form_id') olarakda yapabilirdik. $('form').submit( postgonder ) kodu ile "form submit edildiğinde postgonder fonksiyonunu çalıştır" dedik javascripte. Peki şimdi postgonder fonksiyonunu inceleyelim;function postgonder()
{
$.post('postal.php', $('form').serialize(),function(veri){$('#sonuc').html(veri)});
}Jquery'nin $.post işlevi kısacası bir sayfaya POST verilerini göndermek için kullanılır =) Şimdi burada fonksiyonun yaptığı olay şudur; postal.php dosyasına formdaki tüm input,textarea,select v.b ne kadar değer var ise gönder ve postal.php 'den dönen değerleri HTML olarak #sonuc div'ine yazdır dedik.
Burada hemen $('form').serialize() işleminden bahsetmek istiyorum. Hani yukarda söyledim ya formdaki tüm input,textarea,select v.b ne kadar değer var ise gönder işte bunu tam olarak serialize işlemi yapar. FORM'un içine yazdıgınız tüm değerleri otomatik görür ve istediğiniz sayfaya gönderir.
Şimdi postgonder.html sayfamız bitti. postal.php sayfamızda çok birşey yok. Tek yapacağımız normal kontrollerden geçirmek. postal.php sayfası içeriğimiz;
$adiniz = $_POST['adiniz']; $soyadiniz = $_POST['soyadiniz']; if (empty($adiniz) || empty($soyadiniz)) echo 'Adınızı veya Soyadınızı boş bırakamazsınız!'; else echo "Hoşgeldiniz, sayın $adiniz $soyadiniz";İşte bu kadar, önemli olan bunun HTML tarafıydı. PHP dosyasına veriyi gönderdiğiniz anda PHP bilginiz konuşuruz.
İndirmek için tıklayın.
Demo görmek için tıklayın.
