jQuery ile Sayfanizdaki Butun Formlar Ajax Olsun

0
3815

jQuery ile Sayfanizdaki Butun Formlar Ajax Olsun

Merhabalar,

jQuery ile olan serüvenimiz devam ediyor. Bugünkü örneğimizde, bir sayfamızda birden fazla form olacak ve bütün formlar ajax tekniğine hakim olacak. Yani bütün formların gönderimleri AJAX ile olacaktır. Hemen başlayalım …

BİZİM KÂRIMIZ NE OLACAK ?

1 – Sayfanızdaki bütün formlar ajax ile uyumlu hale gelecek.
2 – Formlar için ayrı ayrı ajax kodu yazmaktan kurtulacaksınız.
3 – Sayfanızdaki gereksiz javascript kodlarından kurtulacaksınız, bu da size fazladan hız sağlayacaktır.
4 – 3. numaraya bağlı olarak browser’a binen yükü azaltacaksınız.

HTML SAYFAMIZ

Şimdi html sayfamıza birden fazla form ekleyelim. HTML sayfanızda önemli olan birden fazla form olması, form elementi değil form alanı olmasıdır.

Gördüğünüz gibi sayfamızda 2 tane form var ve bu formlar POST metoduyla, form1.php ve form2.php adreslerine yönlendirilmiş durumdadırlar. Şimdi gelelim jQuery Kodlarımıza ….

!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script src=”js/jquery.js”></script>
<title>jQuery ile AJAX | www.sdenizhan.com </title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” media=”screen” />
        <script type=”text/javascript”>
            $(document).ready(function() {
                    $(“form”).each(function(index) {
                        $(“form”).eq(index).submit(function(event){
                            event.preventDefault();
                            $.post($(“form”).eq(index).attr(“action”), $(“form”).eq(index).serialize(), function(gelen){
                                $(“form”).eq(index).prepend(“<div id=uyari><p>” + gelen + “</p></div>”);
                            });
                        });
                    });
            });
</script>
</head>
<body>
<form id=”form1″ name=”form1″ method=”post” action=”form1.php”>
  Adınız Soyadınız :
  <label for=”frmAdSoyad”></label>
  <input type=”text” name=”Adiniz Soyadiniz” id=”Adiniz Soyadiniz” />
  <input type=”submit” name=”button” id=”button” value=”Gönder” />
</form>
<form action=”form2.php” method=”post” name=”form2″ id=”form2″>
Kullanıcı Adınız : <input name=”frmKullaniciAdi” type=”text” />
Email Adresiniz : <input name=”frmEmailAdresiniz” type=”text” />
<input name=”button” type=”submit” value=”Gönder” />
</form>
</body>
</html>

JQUERY KODLARI …

Sayfamıza jQuery Kütüphanesini dahil ettikten sonra aşağıdaki kodları yapıştırıyoruz….

<script type=”text/javascript”>
$(document).ready(function() {
//sayfadaki tüm form elementlerini buluyoruz ve indexlerini alıyoruz
$(“form”).each(function(index) {
//form elementlerinden submitlenen ( yollanan ) elementler için işlem yapıyoruz
$(“form”).eq(index).submit(function(event){
// sayfanın yönlenmesini durduruyoruz..
event.preventDefault();
// sayfalara $.post yoluyla ajax isteğini yolluyoruz.
$.post($(“form”).eq(index).attr(“action”), $(“form”).eq(index).serialize(), function(gelen){
    $(“form”).eq(index).prepend(gelen);
}); // post kapat
}); // submit kapat
}); // each kapat
}); // ready kapat
</script>

CEVAP VER

Time limit is exhausted. Please reload CAPTCHA.