jQuery ile kolay örnek Ajax uygulaması
Tarih 19 Ekim 2009 Pazartesi, 23:13 | Etiket(ler) Ajax, jQuery, Asp.Net
Bu yazımda
jQuery kütüphanesini kullanarak form verilerini nasıl başka bir sayfaya göndereceğimizi anlatmaya çalışacağım. jQuery ve bu tip kütüphaneler kısaca kod yazarken geçirdiğimiz zamanı minimuma indirmek için geliştirilmiş, tarayıcı farklılıkları nedeni ile birbirinden değişik, aynı işi yapan kod yazma derdini tarihe gömmüş kullanışlı JavaScript kütüphaneleridir. Daha önceki zamanlarda prototype.js ve script.aculo.us u tercih etmeme rağmen jQuery çok daha geniş kapsamlı ve kullanışlı olduğu için tercihimi bu yönde değiştirmeme neden oldu. Lafı uzatmadan örneğimize geçelim.
Bu proje için Form.aspx ve GelenVeriyiAl.aspx adında iki sayfa oluşturuyoruz. Formumuzda adi ve soyadi adinda iki adet textbox olduğunu varsayıyorum. Formdan gelen verilerimizi sayfaya post eden JavaScript kodumuz şöyle
function FormGonder(){
var formAl = $('#veriGonderForm').serialize() ;
$('#sonucdiv').html('Form gönderiliyor. Lütfen bekleyiniz.');
$.ajax({
type: "POST",
url: "GelenVeriyiAl.aspx",
data: formAl,
success: function(gelen){
if (gelen=="tamam")
{
$('#sonucdiv').html("Veriler başarıyla alındı.");
}
else
{
$('#sonucdiv').html( gelen );
}
}
});
}
Kodu kısaca açıklamak gerekirse #veriGonderForm id değerindeki formumuzun içindeki elemanları alıp uygun hale getiriyoruz ve #sonucdiv id değerindeki div in içine Form gönderiliyor. Lütfen bekleyiniz. yazdırıyoruz. Formdan gelen sonuc "tamam"sa #sonucdiv 'e Veriler başarıyla alındı yazdırıyoruz. Eğer gelen sonuç "tamam"dan farklıysa gelen mesajımızı tekrar #sonucdiv e yazdırıyoruz. (Örn:Hata mesajı)
Şimdi gelen kodları işleyecek GelenVeriyiAl.aspx dosyamızı hazırlayalım. (Siz istediğiniz server side dil ile bu işlemi yapacak bir kod oluşturabilirsiniz)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim adi As String = Trim(Request.Params.Item("adi"))
Dim soyadi As String = Trim(Request.Params.Item("soyadi"))
Response.Clear()
If adi = "" Then
Response.Write("Adı alanını boş bırakmışsınız!")
ElseIf soyadi = "" Then
Response.Write("Soyadı alanını boş bırakmışsınız!")
Else
Response.Write("tamam")
End If
Response.End()
End Sub
Asp dosyamıza formdan gelen verileri almak için küçük bir kod yazıyoruz. adi veya soyadi alanlarından herhangi biri boş ise hangisi olduğunu yazıyor. Doluysa tamam yazıyor ve işlem tamamlanıyor. Bu verileri alıp veritabanına yazabilir veya herhangi bir şekilde kullanabilirsiniz. Tabii ki güvenliği elden bırakmayın ve gelen verileri bir güvenlik mekanizmasına tabi tutun.
Bu kodu geliştirip gönderim anında jQuery efektleri uygulayabilir, button veya herhangi bir elementi görünmez veya görünür kılabilirsiniz. Herşey hayal gücünüz ile sınırlı...
Yorumlar
Bu yazıya henüz yorum yapılmamış. İlk yorumu siz yapmak isterseniz aşağıdaki formu doldurabilirsiniz.
Yorum yazın
Geri Dön | Ana Sayfaya Dön