Bilgiler
  • Ekleyen:
  • Ayberk Atasay
  • Tarih:
  • May 2, 2009
  • Kategori:
  • Javascript/Ajax
  • Paylas:
AJAX Sayfa icinde form calistirma

Gitgide web uygulamalarinda cok sik kullanildigini gordugumuz ve abartilmadigi zamanlarda cok ise yarayan AJAX ile ziyaretcilerinizin form gonderimi sirasinda zaman kaybina ugramamasi ve tarayicinin yenilenmeden form verilerini gondermeyi saglayan uygulama ile ilgili kodlari ekliyorum.

Bu uygulamanin calismasi icin en basta jQuery kutuphanesine ihtiyacimiz var. Daha sonra gerekli olan dosyalari ve kodlari sirasiyla veriyorum.

formpost.js
function IletisimForm() {
$.ajax({
type: "POST",
url: "gonder.asp",
data: $('form#hesapform').serialize(),
success: function(ajaxcevap){
$('#sonuc').html(ajaxcevap + '').slideDown('slow');
}
});
}

Eger ASP yerine farkli bir dil kullanmak istiyorsaniz, 4. satirda bulunan gonder.asp yerine gonder.php veya farkli bir sekilde ayarlayabilirsiniz.

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="TR" xml:lang="TR"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<meta http-equiv="Content-Language" content="tr" />
<title>AJAX ile Form Gonderme</title>
<script src="formpost.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<form id="hesapform" name="hesapform">
<input name="metin" size="30" style="font-family: Tahoma; font-size: 11px;"/>
<input id="gonder" name="gonder" value="Gonder" type="button" onclick="javascript:IletisimForm();">
</form>
<div id="sonuc" style="font-weight:bold;color:red"></div>
</body>
</html>


gonder.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="TR" xml:lang="TR"><head>
<link rel="shortcut icon" href="favicon.ico">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="tr" />
</head>
<body>
<%
Function Temizle(gelenveri)
gelenveri = Replace(gelenveri ,"<","& lt;",1,-1,1)
gelenveri = Replace(gelenveri ,">","& gt;",1,-1,1)
gelenveri = Replace(gelenveri ,Chr(34),"&# 34;",1,-1,1)
gelenveri = Replace(gelenveri ,Chr(39),"&# 39;",1,-1,1)
Temizle = gelenveri
End Function

metin = Temizle(Request.Form("metin"))
Response.Write metin
%></body></html>

Eger ASP yerine farkli bir dil kullanmak istiyorsaniz, gonder.asp dosyasini istediginiz gibi degistirebilirsiniz.

Bu uygulamanin calisir haldeki ornegini gormek icin tiklayiniz.
Yorumlar
  • Eski Yorumlar:
  • Alican
  • Tesekkurler kolay ve anlasilir bir ornek olmus :)
  • 2009-05-02 12:08:38
  • gempili
  • gercekten cok guzel anlatmissin.umarim ajax-asp ile ilgili yazilarinin devami gelir.
  • 2009-05-15 11:45:00
  • kanka
  • Sayfada ajax calistirmayi cok detayli anlatmissin. GuzeL bir calisma. Belki biraz editleyerek dahada ileriye goturulebilir..
  • 2009-06-02 19:23:16
  • Kemal
  • Cok guzel bi ornek olmus cok tesekkurler
  • 2009-07-25 01:03:52
  • tayfun hakyemez
  • ellerinizee saglikk guzell birr ornekk olmuss.. iyi calismalar
  • 2009-10-10 23:42:39
  • Artvin
  • Jquery uzerine asp ile yazilmis ornekler bulabilmek oldukca zor.Ayrica anlasilir ve kolay uygulanabilir bir ornek olmus isime cok yarayacak.Tesekkurler
  • 2009-10-20 04:40:12
  • illaki
  • iyi tamamda en bastaki kodu ust ve altinda <script></script> mi yazicaz yoksa script type olarakmi acicaz neden eksik olarak veriosunuz herkez sizin gibi sanmayin.
  • 2009-10-27 06:55:13
  • Ayberk Atasay
  • @illaki, her kodun basinda kaydedilme sekli yaziyor. Ornegin bu formpost.js adi altinda aynen gorundugu gibi kaydedilecek.
  • 2009-10-29 09:10:40
  • Huseyin
  • Merhaba,Ellerinize saglik guzel olmus.Fakat sormak istedigim bisey var formpost.js isimli dosyada data: $('form#hesapform').serialize(), seklinde yani hesapform isimli input ismi orada.birden fazla input olmasi durumunda yazacagimiz kod bileseni nasil olmali yani data'si nasil olmali. Simdiden tesekkurler,basarilarinizn devamini dilerim...
  • 2009-11-02 13:59:28
  • Barangokalp
  • Merhaba arkadaslar oncelikle Ayberk'e cok tesekkur ederim ki bole bir seyi bizimle paylasmis.. Yanliz <input name="metin" size="30" style="font-family: Tahoma; font-size: 11px;"/> burada bulana kodu <input name="metin" size="30" type ="file" style="font-family: Tahoma; font-size: 11px;"/> konumuna cektigimizde code satiri islem yapmiyor... aslinda gelen veriyi yazmasi geriekir diye dusunuyorum....
  • 2009-12-30 18:42:36
  • barangokalp
  • Merhaba Ellerine saglik. Vemis oldugun kodu dosya upload ederken aspde nasil kullana biliriz..
  • 2010-01-04 01:58:42
  • Cengiz
  • Sayin Atasay, Guzel bir ornek olmus tesekkurler.Fakat ajax olmayan bir yorum alaninda Enter tusunun chr degerini alarak br ile replace edebilmemize ragmen, ayni fonksiyon burada ise yaramiyor. Bunun bir cozumu vardir mutlaka ama ben cozemedim. Yardimlarinizi bekliyorum. Tesekkurler.
  • 2010-02-09 17:52:02
  • Bilal
  • Ataberk bey oncelikle paylasim icin cok tesekkurler. Fakat bir sorum var. kodlari kullandim. Fakat sonuc almadan once nasil yukleniyor resmi koyabilirim sonuc divine ? yardimci olursaniz sevinirim.
  • 2011-09-09 16:27:29
  • wer wer
  • sdf sdf sdf
  • 2011-10-28 12:07:18