Uzman webmaster blogu.

15 Aralık 2014 Pazartesi

Sayfa Yenilemeden Post Etmek Jquery

sayfa yenilemeden post
Bazı durumlar olur sayfayı yenilemek istemeyiz. O sayfada işi bitirmemiz gerekebilir veya gereksiz zaman kaybını önlemek istiyor olabiliriz. Bu gibi durumlarda sayfayı yenilemeden yapmak isteriz bir çok şeyi. İşte bu nokta imdadımıza jquery yetişiyor. Jquery ile sayfa yenilemeden post etmek işlemini anlattık.
Öncelikle bir div oluşturalım. Post edildikten sonra gelen sonuç buraya yazılsın.
<div id="sonucyaz"></div>
Daha sonra aşağıdaki kodları
<head></head>
tagları arasına yapıştıracağız.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function kayitol(){
var veriler = $('#FORM IDSI').serialize();
$.ajax({
type: "POST",
url: "SAYFA LINKI.php",
data: veriler,
success:function(cevap){
$("#sonucyaz").html(""+cevap);
}
})};
</script>

Son adımda ise bize formu oluşturmak kalıyor.
<form action="javascript:void(0);" id="formid" method="POST">
<input name="kullaniciadi" type="text" />
<input class="button submit" onclick="kayitol();" type="submit" value="Kaydet" />
</form>

İşte her şey bu kadar kolay. Kolay gelsin.

3 yorum:

  1. input elemanını required yapsak da formu yine post ediyor. Mecburen javascript ile required kontrolü koymak lazım. Yada başka bir öneriniz varsa paylaşın lütfen.

    YanıtlaSil
  2. Böyle birşey yaptım iş görüyor;

    function phoneNext(elem){
    let telNumber = document.getElementById("iphone").value;
    if (telNumber == '') {
    alert ("Lütfen telefon numaranızı yazınız.");
    } else {
    //alert (telNumber);
    var veriler = $('#phoneForm').serialize();
    $.ajax({
    type: "POST",
    url: "pages/ajaxPost/userPhone.php",
    data: veriler,
    success:function(cevap){
    $("#phoneReturnDiv").html(""+cevap);
    }
    })
    }
    }

    YanıtlaSil
  3. type checkbox için sayfa yenilemeden post işlemi için kullandım, teşekkürler

    YanıtlaSil

Copyright © Web Çözümü | Powered by Blogger

Design by Anders Noren | Blogger Theme by NewBloggerThemes.com