İçeriğe geç

Javascript sayfa yenilemeden post etme olayı

Merhaba,aslında günümüz 2017 şartlarında artık bilmeyen insan sayısının oldukça azaldığı gerçekten projelerde daha akıcı ve güzel sonuçlar almamıza yarayan bir konuda bahsedeceğim. Özetle yapacağımız ajax post. Ben bu derse için direk ajax metodunu değilde daha çok kullandığım $.post metodundan bahsedeceğim.

ihtiyacımız olan html kodları

        <div class="form">
				<div class="alert"></div>
				<input type="text" placeholder="Bir isim giriniz"  name="ad"/>
				<input type="submit" value="Göster" name="gndr_btn">
		</div>

Yukarıda ki html kodları içinde gördüğünüz üzere bir form kullanmadık. Nedeni ise $.post metodunu kullana bilmemiz için böyle kısıtlamanın olmaması. İstediğimiz her hangi bir dom elementinin herhangi bir içeriğini istediğimiz şekilde back-end sayfamıza gönderebiliriz.

sonrasında html sayfamıza jquery kütüphanesini eklememiz lazım.

<html>
    <head>
        <title>Post olayı</title>
    </head>
    <body>
         <div class="form">
				<div class="alert"></div>
				<input type="text" placeholder="Bir isim giriniz"  name="ad"/>
				<input type="submit" value="Göster" name="gndr_btn">
		</div>
    <!-- Javascript kütüphaneleri -->   
    <!-- jquery kodunu buraya ekleyelim. -->
    </body>
</html>

<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>  kodunu satırının yerine ekleyelim. (Kod editörünün azizliği işte ben ekleyemiyorum şuan 😀 )

Şimdide javascript kodlarımızı yazalım.

$(document).ready(function(){ //Tüm sayfa hazır olduğunda.
    $('input[name=gndr_btn]').click(function(){ //Tıklama olayı
        var data={ //Aldığımız input değerlerini koyacağımız obje.
            ad:$('input[name=ad]').val() //İnput değerinin valuesini aldığımız kısım.
        }
        /** $.post metodunun kullanımı. **/
        $.post('islem.php',{data},function(response){
            $('.alert').html(response);
        });
    });
});

Yukarıda yazdığımız kodları biraz açıklayalım. $(document).ready belirtildiği gibi işleme başlamak için sayfada ki tüm yapıların yüklenme işleminin tamamlanmış olmasını bekliyor.

Not: Document ready içine fonksiyonlarınızı yazmak zorunda değilsiniz. yalnızca çağırarak kullanabilirsiniz.

$(‘input[name=gndr_btn]’).click name değeri gndr_btn olan elemente tıklandığında olacak olan olayları eklediğimiz tıklama metodudur.

var data={} içine input değerlerini koyacağımız objedir. Aslında obje kullanmak zorunda değilsiniz. Ancak ben araştırmalarım sonucunda obje oluşturarak kullanmanın güvenlik açısından daha mantıklı olduğunu düşünüyorum.. Sizin tercihiniz. İçinde bulunan verinin ad kısmı veriye ulaşmak için kullanacağımız key değer onun karşısında key değerine karşılık gelen post edilen veri yer alıyor.

$.post metodunun ilk parametresi back-end dosyamızın ki şuan bizim için php. bulunduğu dosya yolu. ikinci parametre gönderdiğimiz veriler. üçüncü ve son parametremiz ise php tarafında işlem bittiğinde ortaya çıkan ekran çıktısıdır. biz bu ekran çıktısını alert sınıfına sahip element içinde gösterdik.

 

PHP kodlarımız

<?php 
    if(isset($_POST)){ //eğer herhangi bir post işlemi varsa
        echo $_POST['data']['ad'];
    
    }else {
        echo 'Lütfen bir ad gir';
    }
?>

 

9 Yorum

  1. kodlarınızı uyguluyorum ancak sanırım gönderdiğim ilk değer olan ürün id si her seferinde aynı gidiyor yani 10 idli bir ürünü içinde ilk ürünün id si gidiyor fonksiyonun içini nasıl boşaltabilirim

    • boraozercom boraozercom

      Merhaba,lütfen php tarafına gönderdiğiniz kodları yazın. Bu şekilde sorununuzu tam olarak çözmem pek olası değil..
      Yanlış anlamamış isem gibi bir html elementiniz var. sürekli farklı bir değer göndermek istiyor iseniz
      elementinizin üzerinde ürün id değerini taşıyabilirsiniz.
      < \a href="" data-id="23" class="tıklanan_obje"> gibi bir id tanımlaması yapabilirsiniz.
      $(‘.tıklanan_obje’).click(function(){
      var urun_id=$(this).data(‘id’); // Bu tanımlama tıklanan elementin üzerinde ki data-id değerini size verir.
      //Bundan sonrasında ise id değerinizi php tarafına göndereğiniz kodları çalıştırırsınız.
      });

  2. <input type="hidden" value="” name=”urun_id”/>

    $(document).ready(function(){ //Tüm sayfa hazır olduğunda.
    $(‘input[name=gndr_btn]’).click(function(){ //Tıklama olayı
    var data={ //Aldığımız input değerlerini koyacağımız obje.
    ad:$(‘input[name=urun_id]’).val() //İnput değerinin valuesini aldığımız kısım.
    }
    /** $.post metodunun kullanımı. **/
    $.post(‘islem.php’,{data},function(response){
    $(‘.alert’).html(response);
    $(‘input[name=urun_id]’).val(“”);
    });
    });
    });

  3. bu giden tarafı

    /*<input type="hidden" value="” name=”urun_id”/>
    */

  4. sanırım kodlar tam olarak sayfaya yazılmıyor mail olarak atıyorum

  5. kısaca senaryo şöyle bir döngü içerisinde bir ürün için beğen butonu yapılacak butona tıklandığında döngüden aldığı ürün id sini php tarafına gönderecek orada da gelen id ye göre beğenme sayısı +1 olarak değişecek

  6. Eren Eren

    merhaba 2 tane post değeri göndermek istesek nasıl olacak şu şekilde deniyorum olmuyor

    $(document).ready(function(){ //Tüm sayfa hazır olduğunda.
    $(‘button[name=gndr_btn]’).click(function(){ //Tıklama olayı
    var data={ //Aldığımız input değerlerini koyacağımız obje.
    ad:$(‘input[name=mesaj]’).val() //İnput değerinin valuesini aldığımız kısım.
    }
    var meta={ //Aldığımız input değerlerini koyacağımız obje.
    kul_id:$(‘input[name=kul_id]’).val() //İnput değerinin valuesini aldığımız kısım.
    }
    /** $.post metodunun kullanımı. **/
    $.post(‘gonder.php’,{data},function(response){
    $(‘.alert’).html(response);
    });
    $.post(‘gonder.php’,{meta},function(response){
    $(‘.alert’).html(response);
    });
    });
    });

    • boraozercom boraozercom

      Eren Merhaba, yeni bir veri alıp göndermek istediğinde yeni bir obje tanımlamana gerek yok.

      var data={
      ad:$(‘input[name=mesaj]’).val(),
      kul_id:$(‘input[name=kul_id]’).val()
      }
      yukarıda ki şekilde yeni bir anahtar üzerinden tanımlaman yeterli. Php tarafında ise
      $_POST[‘data’][‘kul_id’]; şeklinde veriye ulaşabilirsin.

Bir cevap yazın

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