jQuery ile Sayfanızdaki Bütün Formlar Ajax Olsun

Web Sayfanızdaki Bütün Formları jQuery ile Ajax'a Uygun Hale Getirin...

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 ...

Ön İzleme İçin Tıklayınız

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.


<!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>



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 ....

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>



Kodları Açıklayalım mı

1 - jQuery'nin ready bloğunu yazarız ...
2 - Sayfadaki tüm form elementlerine işlem yapmak için each'ten yararlanıyoruz. Burada index değişkeni önemlidir. Elementin dizi içindeki sırasını verir. each hakkında daha fazla bilgi için tıklayın


$("form").each(function(index) {  ....



3 - Sayfadaki tüm form elementlerinin submit olayını durdurmamız gerekiyor. Aşağıdaki kod form submit olduğunda demektir. Kodun eq(index) bölümü jQuery'nin bir filitreleme fonksiyonudur ve hangi form üzerinde işlem yaptığımızı anlamamıza yardımcı olur. eq fonksiyonu hakkında daha fazla bilgi için burayı tıklayın


$("form").eq(index).submit(function(event){ ...



4 - Aşağıdaki kodla form elementlerinin submit olayı tamamen durduruluyor. Böylece kullanıcı sayfadan ayrılmamış olur. event hakkında daha fazla bilgi almak için tıklayınız.


event.preventDefault();



5 - jQuery'nin ajax fonksiyonlarından biri olan $.post fonksiyonunu kullanarak ajax işlemlerimizi yaptıracağız. Bu fonksiyonun kullanılışı şöyledir :


$.post(ajax_adresi, parametreler, işlemler, gönderim_türü )



ajax_adresi : verilerin işleneceği sayfadır. ajax'ın arkaplanda iletişime geçtiği dosyadır.
parametreler: dosyaya gönderilen verilerin bütünüdür.
işlemler : ajax işlemi bittiğinde yapılacaklardır. sonucun gösterilmesi gibi...
gönderim_türü : verilerin hangi yolla gönderileceğini ayarlar. xml, json, html v.s.

$.post fonksiyonunu hatırladıktan sonra, kodlarımıza geri dönelim. Bizim $.post kodlarımız şöyle :


$.post($("form").eq(index).attr("action"), $("form").eq(index).serialize(), function(gelen){

        $("form").eq(index).prepend(gelen);

    });


Yukarıda belirttiğimiz gibi $.post için ilk önce bir ajax adresine ihtiyacımız var. Aşağıdaki kod, ajax için gerekli olan adres için form elementinin action özelliğindeki adresi kullanır.


$("form").eq(index).attr("action")



$.post'un ihtiyacı olan fonksiyonun 2. kısmı için yani veriler için jQuery'nin serialize() özelliğini kullanıyoruz.


$("form").eq(index).serialize()



Bu özellik ilgili formdaki tüm alt elementlerin ( text, select, password, button v.s) name/id kısımları ve bu alanlara girilen değerleri ( value ) birleştirerek bir veri katarı haline getirir. Örneğimizde, form2 için, kullanıcı adına sDenizhan, şifreye de 123456 girersek, katarımız "frmKullaniciAdi=sDenizhan&frmEmailAdresiniz=123456" olacaktır.

İşlemler kısmında ise, ajax işlemi sonunda yapılacakları tanımlarız. Örneğimizde, kullanıcıdan alınan bilgileri, formların önüne ekleyerek kullanıcıya göstermesini söylüyoruz. İşlemler sonucunda dönen değerler gelen değişkeninde tutulur ve bu değişken prepend fonksiyonu ile ilgili elementin önüne eklenir.

function(gelen){

        $("form").eq(index).prepend(gelen);

    }



SONUÇ

Web dünyasının hızla değişmesi sonucunda, görsellik ve işlevsellik daha çok önem kazanmaya başladı. Bu bağlamda bir çok site AJAX teknolojilerinden yararlanmaya başladı ve devam ediyor. jQuery Javascript Kütüphanesi, AJAX teknolojisinden en kolay şekilde yararlanmanızı sağlayan kütüphanelerin başında geliyor.

Bizde yukarıdaki örneğimizde, jQuery nimetlerinden yararlanarak, bir sayfada birden fazla form'un AJAX'a uygun hale getirilmesini öğrenmiş bulunduk. Aklınıza takılan, zihninizi yoran bir kısım yada kod üzerinde düşünceleriniz varsa lütfen yorumlarınızla bizimle paylaşınız.

Teşekkür Ederim.

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git