ajax login
Merhaba ajax ile login işlemi yaparken butona basınca loader gif çıkartmak istiyorum nası yapabilirm
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (9)
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?
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!
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()
})
})
})
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}`)
})
})
})
<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");
})