jQuery AJAX Kullanarak Anlık Veri Çekme

Merhabalar, bu yazımda sizlere php, ajax, jquery kullanarak neler yapabileceğimizden bahsedeceğim. Ajax (Asynchronous JavaScript and XML), web geliştirme teknolojisidir. Ajax sayesinde, web sayfalarında dinamik içerik gösterilebilir ve sayfa yenilemeden veri alınıp gönderilebilir. Ajax, bir web sayfasındaki JavaScript kodunu kullanarak sunucuya asenkron bir istek gönderir ve gelen cevapları sayfa içerisinde kullanılabilir hale getirir. Bu sayede, web sayfaları daha hızlı ve daha etkileşimli hale gelir. Ajax teknolojisi, kullanıcı deneyimini iyileştirmek ve sayfa yükleme sürelerini azaltmak için sıklıkla kullanılır.

Öncelikle, jQuery kütüphanesini HTML sayfanıza dahil etmeniz gerekmektedir. Bunun için head kısmına aşağıdaki kodu ekleyebilirsiniz:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

JQuery kütüphanesini kullanarak AJAX ile bir web sayfasından sunucuya bir veri göndermek için aşağıdaki kod bloğunu kullanabilirsiniz:

// Veriyi al
var data = "veri=" + encodeURIComponent(veri);
var url = "http://www.example.com/post_url";

// JQuery kütüphanesini kullanarak AJAX isteği yap
$.ajax({
    type: "POST",
    url: url,
    data: data,
    success: function(response) {
        // İşlem başarılıysa çalışacak kodlar
    }
});

Ajax ile PHP dosyasının içeriğini çekmek için aşağıdaki kodu kullanabilirsiniz:

$.ajax({
   url: "veri.php", // Buraya PHP dosyasının adresini yazın.
   type: "GET", // Veri tipini belirtin (GET veya POST).
   dataType: "json", // Verinin türünü belirtin (örneğin: json, html, xml).
   success: function(data) {
       // PHP dosyasından gelen veriyi burada işleyebilirsiniz.
   }
});

PHP dosyasından gelen veriyi, HTML tablosuna yazdırmak için aşağıdaki kodu kullanabilirsiniz:

$.ajax({
   url: "veri.php",
   type: "GET",
   dataType: "json",
   success: function(data) {
       // Gelen veriyi döngüyle gezerek HTML tablosuna yazdırın.
       $.each(data, function(key, value) {
           $("#tablo tbody").append("<tr><td>" + value.sütun1 + "</td><td>" + value.sütun2 + "</td></tr>");
       });
   }
});

Burada dikkat edilmesi gereken nokta php dosyamızdan gelen verinin JSON formatında olması gerektiğidir. PHP ile gelen veriyi JSON formatına da aşağıdaki şekilde çevirebiliriz.

$pdo = new PDO("mysql:host=localhost;dbname=veritabanim", "kullanici_adi", "sifre"); // pdo kullanarak veritabanımıza bağlandık

$sql = "SELECT * FROM tablo_adi WHERE koşul"; // veritabanımıza sorgumuzu yazdık

$stmt = $pdo->prepare($sql);

$stmt->execute();
$sonuclar = $stmt->fetchAll(); // tüm verileri çektik

echo json_encode($sonuclar); // sonuçları json_encode fonksiyonu ile json formatına çevirip yazdırdık

Şimdi ise bir html login formundan ajax kullanarak kullanıcımıza giriş yaptıralım.

HTML formumuz şu şekilde olacak.

<form id="login_form">
  <label for="kullanici_adi">Kullanıcı Adı:</label>
  <input type="text" id="kullanici_adi" name="kullanici_adi"><br>
  <label for="sifre">Şifre:</label>
  <input type="password" id="sifre" name="sifre"><br>
  <button type="submit" value="Giriş Yap">
</form>

AJAX çağrımız şu şekilde olacak.

$("#login_form").submit(function(e) {
  // form verilerini al
  var veriler = $(this).serialize();

  // AJAX çağrısı yap
  $.ajax({
    type: "POST",
    url: "login.php",
    data: veriler,
    success: function(sonuc) {
      // login işlemi burada işlenecek
    }
  });

  // formu gönderme
  e.preventDefault();
});

Login işlemlerini yaptıracağımız PHP dosyamız ise şu şekilde olabilir.

<?php

// form verilerini al
$kullanici_adi = $_POST["kullanici_adi"];
$sifre = $_POST["sifre"];

// veritabanından kullanıcıyı doğrula
// (veritabanı bağlantısı ve sorgu burada yapılacak)
$sonuc = false;
if ($kullanici_adi == "admin" && $sifre == "123456") {
  $sonuc = true;
}

// login işleminin sonucunu döndür
echo json_encode($sonuc);

?>

Yukarıdaki kodlar örnek olması amaçlı hazırlanmıştır. Tabi ki CSRF Token güvenlik önlemini, injection’a karşı almamız gereken önlemleri diğer yazılarımda anlatmıştım. Mutlaka gerekli güvenlik önlemlerini almalıyız. Eksik bir nokta veya geliştirmemi istediğiniz bir alan varsa yorumlarda belirtirseniz çok sevinirim.

Bu ve benzeri önemli ipuçlarını öğrenmek için diğer yazılarıma da göz atabilirsiniz.

Web sitesine mi ihtiyacınız var ?