jQuery ile Form Submit Edildiğinde (AJAX ile POST) Yükleniyor Resmi Göstermek

Bilgisayar ve kullanıcı arasındaki iletişim kullanıcı arayüzü sayesinde sağlandığı için kullanıcı arayüzleri çok önemlidir. Bad Interface denilen kötü kullanıcı arayüzlerinden kaçınılmalıdır çünkü düzensiz ve hatalı kullanıcı arayüzleri müşterileri üründen soğutur. İşte bu yazıda bir formu submit ettiğimizde verilerin post ediliyor olduğunu gösteren bir uygulama yapacağız. Bu sayede verilerin post edildiğini, arkaplanda işlemlerin gerçekleştiğini ve beklenmesi gerektiğini kullanıcıya belirtmiş oluyoruz. Böyle küçük işlemleri kullanıcıya belirtmediğimiz takdirde kullanıcının kafasında acaba formu post etti mi?, formu gönderdi mi? vb. gibi sorular oluşur. Sizlere kendi projelerim için hazırladığım 2 örneği paylaşacağım.

Örnek 1)

İlk örnekte 2 input alanı olacak. Form submit edildiğinde kaydın yapıldığına dair yükleniyor resmi gösterilecek. Son olarak kaydın yapıldığı bilgisi verilecek.

Oluşturulan Görüntüsü

HTML Kodu

yukleniyor id'li div penceresinin ilk başta görünmesini engelliyoruz. Kaydol butonuna bastığımızda yukleniyor id'li div penceresi yani yükleniyor resmi devreye giriyor ve işlem bittiğinde tekrar görünmesini engelliyoruz. Yükleniyor resminin dosya yolunu ve ismini img src'den değiştirebilirsiniz. Eğer yükleniyor resminin altındaki yazıyı istemiyorsanız span etiketini silebilirsiniz.

<div id="uyelik_formu">
    <form onsubmit="return kayit()" name="kayit_formu" method="POST">
        <label>Ad:</label>
        <input type="text" name="ad" id="ad">
        <br>
        <label>Soyad:</label>
        <input type="text" name="soyad" id="soyad">
        <br>
        <input type="submit" value="Kaydol">
    </form>
    <br>
    <div id="yukleniyor" style="display:none;">
        <img src="yukleniyor.gif" alt="Yükleniyor">
        <br>
        <span>Kaydınız yapılıyor...</span>
    </div>                
    <div class="kayit_uyari"></div> 
</div>

CSS Kodu

CSS kodları tasarım kodlarıdır, uygulamanın daha güzel görünmesi içindir. Siz kendinize göre buradaki ayarları değiştirebilirsiniz.

#yukleniyor
{
    text-align:center;
}
#yukleniyor img
{  
    width:25px;
    height:25px;
}
label
{          
    float: left;
    width: 150px;
}
#uyelik_formu
{
    padding: 10px;
    width: 400px;
}

jQuery Kodu

input değerlerini AJAX ile post ediyoruz. yukleniyor id'li div penceresinin görünmesi ve gizlenmesi için gerekli kodlardır. Post edilecek sayfayı kendinize göre değiştirebilirsiniz.

function kayit() 
{ 
    $('.kayit_uyari').html("");

    var ad = $("#ad").val();
    var soyad = $("#soyad").val();

    $.ajax(
        {       
            type: "POST",
            url: "yukleniyor_post.php",
            data: {
                kayit_ad : ad, 
                kayit_soyad : soyad
            },
            beforeSend: function() { $('#yukleniyor').show(); },
            success: function(sonuc)
            {
                if(sonuc == 'Kaydınız yapıldı')
                    $('.kayit_uyari').html("Kaydınız Yapıldı");
                else
                    $('.kayit_uyari').html("Hata: Kaydınız Yapılmadı");
            },
            complete: function() { $('#yukleniyor').hide(); }
    })
    return false;
}

PHP Kodu

Post sayfası kodlarıdır. input değerlerini alıyoruz.

<?php
    if(isset($_POST["kayit_ad"]) && isset($_POST["kayit_soyad"]))
        echo "Kaydınız yapıldı";
?>

Önizlemeye tıklayarak uygulamanın nasıl çalıştığını inceleyebilirsiniz. input alanlarını doldurup gönderdiğinizde yükleniyor resmi görünecek ve ardından kayıt yapıldığına dair bir çıkacak, inputlardan birini boş gönderirseniz hata mesajı alacaksınız. Ayrıca normalde form işlemi kısa sürdüğü için yükleniyor resmini görmeniz açısından sleep() fonksiyonu ile post işlemini beklettim.

Örnek 2)

İkinci örnekte yine 2 input alanı olacak. Form submit edildiğinde kaydın yapıldığına dair yükleniyor resmi gösterilecek. Son olarak kaydın yapıldığı bilgisi verilecek. Ancak bu sefer form submit edildiğinde yükleniyor resmi sayfanın tümünü post işlemi süresince devre dışı bırakacak ve post işlemi bittiğinde sayfa tekrar aktif olacak.

Oluşturulan Görüntüsü

HTML Kodu

yukleniyor id'li div penceresinin ilk başta görünmesini engelliyoruz. Kaydol butonuna bastığımızda yukleniyor id'li div penceresi yani yükleniyor resmi devreye giriyor ve işlem bittiğinde tekrar görünmesini engelliyoruz. İlk örneğin aksine yükleniyor resminin dosya yolunu CSS kodlarında belirteceğiz. Eğer yükleniyor resminin altındaki yazıyı istemiyorsanız span etiketini silebilirsiniz.

<div id="uyelik_formu">
    <form onsubmit="return kayit()" name="kayit_formu" method="POST">
        <label>Ad:</label>
        <input type="text" name="ad" id="ad">
        <br>
        <label>Soyad:</label>
        <input type="text" name="soyad" id="soyad">
        <br>
        <input type="submit" value="Kaydol">
    </form>
    <br>
    <div id="yukleniyor">
        <span>Kaydınız yapılıyor...</span>
    </div>        
    <div class="kayit_uyari"></div> 
</div>

CSS Kodu

CSS kodları tasarım kodlarıdır, uygulamanın daha güzel görünmesi içindir. Siz kendinize göre buradaki ayarları değiştirebilirsiniz. Ayrıca yükleniyor resminin dosya yolunu ve ismini değiştirebilirsiniz.

#yukleniyor
{
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8 ) url(yukleniyor.gif) 50% 50% no-repeat;
}        
#yukleniyor span
{
    text-align: center;
    margin-top: 29%;
    display: block;
}
label
{          
    float: left;
    width: 150px;
}
#uyelik_formu
{
    padding: 10px;
    width: 400px;
}

jQuery Kodu

input değerlerini AJAX ile post ediyoruz. yukleniyor id'li div penceresinin görünmesi ve gizlenmesi için gerekli kodlardır. Post edilecek sayfayı kendinize göre değiştirebilirsiniz.

function kayit() 
{ 
    $('.kayit_uyari').html("");

    var ad = $("#ad").val();
    var soyad = $("#soyad").val();

    $.ajax(
        {       
            type: "POST",
            url: "yukleniyor_post.php",
            data: {
                kayit_ad : ad, 
                kayit_soyad : soyad
            },
            beforeSend: function() { $('#yukleniyor').show(); },
            success: function(sonuc)
            {
                if(sonuc == 'Kaydınız yapıldı')
                    $('.kayit_uyari').html("Kaydınız Yapıldı");
                else
                    $('.kayit_uyari').html("Hata: Kaydınız Yapılmadı");
            },
            complete: function() { $('#yukleniyor').hide(); }
    })
    return false;
}

PHP Kodu

Post sayfası kodlarıdır. input değerlerini alıyoruz.

<?php
    if(isset($_POST["kayit_ad"]) && isset($_POST["kayit_soyad"]))
        echo "Kaydınız yapıldı";
?>

Önizlemeye tıklayarak uygulamanın nasıl çalıştığını inceleyebilirsiniz. input alanlarını doldurup gönderdiğinizde yükleniyor resmi görünecek ve ardından kayıt yapıldığına dair bir çıkacak, inputlardan birini boş gönderirseniz hata mesajı alacaksınız. Ayrıca normalde form işlemi kısa sürdüğü için yükleniyor resmini görmeniz açısından sleep() fonksiyonu ile post işlemini beklettim.

Loading Resimleri

Son olarak birkaç tane yükleniyor resmi ve kendiniz üretmeniz için de birkaç link paylaşıyorum.

http://ajaxload.info/

http://preloaders.net/

http://loadergenerator.com/