AJAX ile sayfa yenilemeden bazı işlemleri yapabiliriz (database bağlantısı, post, get vb.). Artık günümüz websitelerinde sıkça gördüğümüz, hem görüntü hem de dinamik websiteler oluşturulması açısından kullanılması gereken önemli bir özelliktir. Bu makalede HTML ile kullanıcı adı, şifre ve mailden oluşan çok basit bir üyelik formu yapıp, girilen değerleri jQuery ile kontrol ettikten sonra hazırladığımız php sayfasına gönderip, sonucu ilk sayfaya geri döndürmeyi öğreneceğiz. İşte bütün bu işlemler sayfamız yenilenmeden gerçekleşecektir.
Kullanıcı Adı: <input type="text" name="kadi"> <br>
Şifre: <input type="password" name="sifre"> <br>
Mail: <input type="text" name="mail"> <br>
<button type="submit" onclick="kayit()">Kaydol</button>
<div id="uyari"></div>
Sayfamızda kullanıcı adı, şifre ve mailden oluşan 3 tane input alanı ve bu değerleri göndermek için 1 tane buton olacak. inputlarda dikkat etmemiz gereken nokta name özelliğine girilen değerlerdir çünkü bunu scriptte kullanacağız. Buton oluştururken ise onclick kullanarak tıklandığında istediğimiz fonksiyonun çalışmasını sağlayacağız ve böylece hem kontrol hem de POST işlemlerimiz gerçekleşecek. En alt satırdaki div alanı ise dönecek sonucu bastıracağımız alandır.
Not: AJAX ile post işlemlerinde form kullanmamız gerekmiyor.
function kayit()
{
var mail = $("input[name=mail]").val();
var kadi = $("input[name=kadi]").val();
var sifre = $("input[name=sifre]").val();
mail = jQuery.trim(mail);
kadi = jQuery.trim(kadi);
sifre = jQuery.trim(sifre);
var atpos=mail.indexOf("@");
var dotpos=mail.lastIndexOf(".");
if(kadi == "")
{
var newHTML = "<div style='color: red;'> *Kullanıcı Adı Girin </div>";
document.getElementById("uyari").innerHTML=newHTML;
}
else if(sifre == "")
{
var newHTML = "<div style='color: red;'> *Şifre Girin </div>";
document.getElementById("uyari").innerHTML=newHTML;
}
else if(mail == "")
{
var newHTML = "<div style='color: red;'> *E-Mail Girin </div>";
document.getElementById("uyari").innerHTML=newHTML;
}
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=mail.length)
{
var newHTML = "<div style='color: red;'> *Geçerli email değil </div>";
document.getElementById("uyari").innerHTML=newHTML;
}
else
{
$.ajax(
{
type: "POST",
url: "jquerypost2.php",
data : {post_mail : mail, post_kadi : kadi, post_sifre : sifre},
success: function(sonuc){
if(sonuc == 'Kaydınız yapıldı')
{
var newHTML = "<div style='color: green;'> *Üyeliğiniz kaydedildi </div>";
document.getElementById("uyari").innerHTML=newHTML;
}
}
})
}
}
Fonksiyondaki ilk 3 satırda inputlardan alınan verileri fonksiyona aktarıyoruz. Sonraki 3 satırda trim fonksiyonu kullanarak verilerin başındaki ve sonundaki gereksiz boşlukları siliyoruz. Sonraki 2 satır ise mail adresinin geçerli olup olmadığını kontrol etmeye yarayacak olan kodlardır. if ve if else şartları inputlardan alınan verilerin boş olup olmadığını ve geçerli mail adresi olup olmadığını kontrol etmeye yarıyor. else içerisi ise asıl işimizi gören kısımdır.
type: POST veya GET değeri alır.
url: Database işlemlerini yapacağımız PHP dosyası.
data: POST ile göndereceğimiz veriler.
succes: Dönecek olumlu sonuçta neler olacağını gösteren bölüm.
<?php
if(isset($_POST["post_kadi"]) && isset($_POST["post_sifre"]) && isset($_POST["post_mail"]))
echo "Kaydınız yapıldı";
?>
url kısmında yazan PHP dosyasıdır. Alınan değerler tanımlı mı değil mi kontrol eder, eğer tanımlıysa sonuç olumlu olarak geri döner. Burada dikkat edilecek nokta echo ile yazdırdığımız yazı AJAX'ın success alanındaki if şartını sağlamalı, yani aynı olmalı.
Hilmi
Admin
<a onclick=fonksiyon>
<div id="loginalani">
inputlar
</div>
#inputalani
{
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-renk;
}
Hilmi
admin
@RenderBody()alanından bu sayfayı açtım. Bu alandan linke tıkladığımda istediğim sonucu alabiliyorum. Ama kullanıcıyı biraz dolandırmış oluyorum. Hemde kullandığım sayfayı karartan form alanın bir anlamı kalmıyor gibi. Bunu tamplate üzerinden uygulamak istiyorum.
Admin
Kadir
Ana Sayfa
jquery 
Paylaş
Oyla