jQuery Form Post

jQuery Uygulaması

Serpito arşivini kurcalarken, jQuery kütüphanesini kullanarak ajax form örneklerini hiç paylaşmadığımızı farkettim. Geç de olsa bu açığı kapatmaya çalışalım.

 

Özellikle sayfalarda kullanıcı yorumları veya mesajlarını iletebilmek için kullanılan formlar ,  jQuery kullanarak pratik bir şekilde Ajax ile çalıştırılabilmektedir. 

Şimdi aşağıdaki kısa kod blogunu inceleyelim;


<script type='text/javascript'>

$(function(){
$("#iletisim").submit(function(){
$("#response").html("<img src='loading.gif' />");
$.ajax({
type: "POST",
data: "isim="+$("#isim").val()+"&eposta="+$("#eposta").val()+

"&web="+$("#web").val()+"&mesaj="+$("#mesaj").val(),
url: "post.php",  //formdan alinan datalar, post.php'ye yonlendirilir.
success: function(msg)
{
$("#response").html(msg);
}
});
return false;
});

});
</script>

 

#iletisim” ID Formun submit edilmesinden sonra $.ajax yöntemi başlıyor, ve  formdan gelen verileri,  post.php dosyasına POST ediyor.

 

 

Şimdi de, çalışan bir demonun basit bi kod yapısını paylaşıyorum.  Dilerseniz, bu yazının altında uygulama dosyalarını indirebilirsiniz.

index.php


<script type='text/javascript' src='jquery.pack.js'></script>
<script type='text/javascript'>
$(function(){
$("#iletisim").submit(function(){
$("#response").html("<img src='loading.gif' />");
$.ajax({
type: "POST",
data: "isim="+$("#isim").val()+"&eposta="+$("#eposta").val()
+"&web="+$("#web").val()+"&mesaj="+$("#mesaj").val(),
url: "post.php",
success: function(msg)
{
$("#response").html(msg);
}
});
return false;
});

});
</script>

&amp;amp;amp;amp;amp;amp;amp;nbsp;

<form action="" method="post" name="iletisim" id="iletisim">
<div id="commentform">
<p><label>İsminiz</label> <input type="text" id="isim" /></p>
<p><label>E-posta</label> <input type="text" id="eposta"  /></p>
<p><label>Websiteniz</label> <input type="text" id="web"/></p>
<p><label>Mesajınız</label><textarea rows="5" cols="40" name="mesaj" id="mesaj"></textarea></p>
<p align="left"><button type="submit" id="submit" style="cursor:pointer;">Gönder</button></p>
</div>
</form>

<div id="response"></div>

 

Ajax ile form verilerini işleyen, post.php kodlarını paylaşalım. Şunu belirtmem lazım,  $_POST arrayının değerlerini sadece print eden basit bir kod paylaştım. Buraya gelen verileri , hangi amaçla kullanıyorsanız, dilediğinizce handle edip, kullanabilir ve uygulamanızı geliştirebilirsiniz.

post.php


<h4>Post edilen data</h4><br />
<pre>
<?php
print_r($_POST);
?>
</pre>

 

Demo            Download

3 thoughts on “jQuery Form Post

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir