Jquery ve Ajax ile post etme işlemi

Merhaba değerli okurlarımız, bugün Jquery ve Ajax ile PHP post etme işlemini yapacağız. Bu uygulamayı projenizin istatistik kısımlarında kullanabilirisiniz (Örneğin hangi ürüne kaç kere tıklandığını çekebilirsiniz). Yapacağımız örnek uygulamada kullanıcı bağlantıya tıklayınca data ile almış olduğumuz verileri PHP back-end kısmında işleyebileceğiz. Sizi fazla tutmadan örneğe geçelim.

Adım 1: Dosyalarımızı oluşturalım

Uygulamamıza başlayabilmek için üç adet dosya oluşturmamız gerekiyor, index.php islem.php main.js dosyalarımızı oluşturduktan sonra diğer adımlarımıza geçebiliriz.

Adım 2: index dosyamızı oluşturalım

İlk adımda JavaScript dosyalarımızı dahil edeceğiz. JavaScript dosylarımızı </body> etiketimizin bir üstüne dahil edelim.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="main.js" charset="utf-8"></script>

ardından tıklanınca aksiyon alacak objemizi oluşturalım, ben bir link üzerinden gerçekleştireceğim, siz buton, resim ve benzeri objeleri kullanabilirsiniz. 

<a data-url="https://google.com" data-id="8" class="click" target="_blank">Tıkla</a>

JavaScript dosyamıza veri gönderebilmek için iki adet data oluşturdum ve class ismi verdim.

data-id -> Bu kısıma herhangi bir stunun ID versini alabilirsiniz.
data-url -> Aksiyondan sonra sayfanın nereye yönlendireceğini söylüyoruz.

Adım 3: JavaScript kodlarımızı yazalım

// Localost: http://localhost/uygulamalar/tiklaninca-artirma/islem.php
// Sunucu: functions/islem.php

$(".click").click(
  function(events){
    $.post("http://localhost/uygulamalar/tiklaninca-artirma/islem.php",{
      url:$(this).data("url"),
      id:$(this).data("id")
    },(res)=>{
      console.log(res);
    })
    open($(this).data("url"));
  })

Bu kısımda eğer classı click olan bir objeye tıklanırsa şunları gerçekleştir tarzında bir komut ile başladık, bağlantımızdaki data-id ve data-url den gelen verileri post ettik.

Adım 4: Test edelim

Şimdi ise post ettiğimiz verinin çalışıp çalışmadığını kontrol edelim. Hemen islem.php sayfamızı açalım ve içine verilerimizi yazdıralım.

echo $_POST["id"];
echo " - ";
echo $_POST["url"];

kodumuzu yazdıktan sonra index sayfamıza girelim İncele -> Console kısmına console.log kodunu yazalım ve bağlantıya tıklayalım.

gördüğünüz gibi <a></a> etiketimizin içinde ki data-id ve data-url verilerini başarılı bir şekilde post ettik. Umarım yaptığımız bu uygulamayı projenize yararlı olur. Teşekkürler.