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.
May 2, 2009
Ayberk Atasay
Javascript/Ajax
13 yorum