v2.5.2
Giriş yap

ajax login

wwx
389 defa görüntülendi
9

Merhaba ajax ile login işlemi yaparken butona basınca loader gif çıkartmak istiyorum nası yapabilirm

php jquery
Cevap yaz
Cevaplar (9)
abdullahx
500 gün önce

Birkaç farklı yol olabilir, ya fontawesomw gibi font kütüphanelerini dahil ederek onları kullanırsın ya da böyle loading tarzı bir svg indirirsin onu kullanırsın ya da direkt bir loading kütüphanesi kullanırsın. Sence en iyisi hangisi?

1
#011625
h4ckdr0
494 gün önce

Merhaba!
PHP ve AJAX ile login işlemini yaparken bir loader gif eklemek için aşağıdaki adımları izleyebilirsiniz:
1- Öncelikle, login işleminin yapıldığı sayfada bir div etiketi oluşturun ve bu div'e bir ID verin.
Örneğin:

<div id="loader"></div>

2- Daha sonra, login işlemini yapacak olan AJAX isteğine cevap döndüğünde bu div'in içine bir gif dosyası ekleyin.
Örneğin:

$("#loader").html('<img src="loader.gif" alt="Yükleniyor..." />');

3- Login işleminin başarılı bir şekilde tamamlandığını doğruladıktan sonra, gif dosyasını kaldırın ve login işleminin tamamlandığını kullanıcıya bildirin.
Örneğin:

$("#loader").html('');
alert("Login başarılı!");

Bu adımları uyguladığınızda login işlemi sırasında bir loader gif göstererek kullanıcıyı bekletme süresini kısaltabilirsiniz. Eğer bu konuda daha ayrıntılı bilgiye ihtiyacınız olursa lütfen bana sorularınızı sorun. İyi çalışmalar!

0
#011651
wwx
501 gün önce

@abdullahx evet hocam ajax işlemi gerçekleşirken bunu çıkartmak istiyorum

0
#011623
abdullahx
501 gün önce

Yapmak istediğin böyle bir şey mi?

1
#011621
wwx
501 gün önce

@abdullahx dönüşün için teşekkür ederim hocam bu loaderi butonda nası gösterebilirim ?

0
#011620
abdullahx
502 gün önce

En basit yöntemle


$(function () {
        $("#login_form").on("submit", function (e) {
            e.preventDefault()
            $.ajax("<?=$site?>api/login.php", {
                beforeSend() {
                    // Öncesinde Sitene bir loader gif koy ve style olarak display:none yap
                    console.log('Gönderi işleniyor')
                    // id değeri loader olduğunu varsayalım
                    $("#loader").show()
                },
                method: 'POST',
                data: $(this).serialize(),
                dataType: "json",
            }).then(success => {
                if (success.status) {

                } else {

                }
            }, fail => {
                console.log(`Server hatası: ${fail}`)
            }).always(() => {
                $("#loader").hide()
            })
        })
    })
1
#011616
wwx
502 gün önce

fikri olan

0
#011613
wwx
503 gün önce

peki bunu ajax ile nası yapabilirim ? 

    $(function () {
        $("#login_form").on("submit", function (e) {
            e.preventDefault()
            $.ajax("<?=$site?>api/login.php", {
                beforeSend() {
                    console.log('Gönderi işleniyor')
                },
                method: 'POST',
                data: $(this).serialize(),
                dataType: "json",
            }).then(success => {
                if (success.status) {

                } else {

                }
            }, fail => {
                console.log(`Server hatası: ${fail}`)
            })
        })
    })
0
#011604
serkan
504 gün önce
<button class="btn" id="btn">Tıkla</button>

.btn{
  padding:  10px;
  width: 120px;
  background-color: #fff;
  cursor:pointer;
}
.spiner{
  width: 120px;
  padding: 10px;
  background: url(https://miro.medium.com/max/720/1*CsJ05WEGfunYMLGfsT2sXA.gif) no-repeat center center/cover;
  background-size: 100%;
}

    const btn = document.querySelector("#btn");
    btn.addEventListener("click", function(){
      btn.innerText = "";
      btn.classList.add("spiner");
    })
0
#011597