Yusuf SEZER

PHP AJAX Kullanımı

Paylaş
Facebook
Linkedin
X

PHP tabanlı web sayfalarında AJAX kullanarak veri ekleme, veri çekme, veri listeleme, veri güncelleme, veri silme ve dosya yükleme işlemleri ile ilgili bilgiler yer alıyor.

Veri ekleme

Veri ekleme işlemi için öncelikle gerekli olan form hazırlanır.

<form action="ekle" method="POST" name="kayitformu">
  <label for="adi">Adınız: </label>
  <input type="text" id="adi" name="adi" required="required" />
  <label for="soyadi">Soyadınız: </label>
  <input type="text" id="soyadi" name="soyadi" required="required" />
  <input type="submit" />
</form>

Veri ekleme işleminden sonra kullanılacak PHP komutlarının hazırlayalım.

<?php

if (isset($_POST['adi'], $_POST['soyadi'])) {

    $ajax_kullanimi = isset($_POST['ajax']);

    $adi = trim(filter_input(INPUT_POST, 'adi', FILTER_SANITIZE_STRING));
    $soyadi = trim(filter_input(INPUT_POST, 'soyadi', FILTER_SANITIZE_STRING));

    if (empty($adi) || empty($soyadi)) {
        die(yazdir("Lütfen formu eksiksiz doldurun!", $ajax_kullanimi));
    }

    die(yazdir("Veri ekleme işlemi", $ajax_kullanimi));
}

function yazdir($veri, $ajax = FALSE)
{
    if ($ajax) {
        header("Content-type: application/json; charset=UTF-8");
        return json_encode(["sonuc" => $veri]);
    } else {
        return $veri;
    }
}

?>

Veri ekleme işlemi hem ajax kullanarak hem de sadece form gönderme ile yapılacağından ajax kullanımı için ayrıca $ajax_kullanimi değişkeni ile durum kontrol edilmiştir.

Veri ekleme işlemi ajax ile yapılacaksa header ve json_encode fonksiyonlarına uygun değerler yazılarak işlem ile ilgili JSON biçiminde bilgi alınması sağlanmıştır.

Daha sonra veri ekleme işlemi yapılmıştır. Veritabanına veri ekleme işlemi ile ilgili detaylı bilgi için PHP Dersleri bölümüne bakabilirsiniz.

Form ve veri ekleme işlemi hazırlandıktan sonra ajax ile veri ekleme işleminin en önemli kısmı olan ajax ile veri gönderme işlemi yapılır.

<script>
'use strict';
  var kayitFormu = document.forms["kayitformu"];
  kayitFormu.addEventListener("submit", gonder);

  function gonder(event) {
    event.preventDefault();

    var adi = kayitFormu.adi.value;
    var soyadi = kayitFormu.soyadi.value;
    var veri = "adi=" + adi + "&soyadi=" + soyadi + "&ajax=true";

    ysAjax("/ekle.php", "POST", veri, function (sonuc) {
      console.log(sonuc);
      //alert(sonuc.response);
      //alert(sonuc.responseText);
    });
  }
</script>

Veri ekleme işleminde form seçilmiş ve form bilgilerini gönderme başlayınca gonder isimli fonksiyonun çalıştırılması sağlanmıştır.

Fonksiyon ilk olarak gönderme işlemini preventDefault ile iptal etmiştir.

Formdaki veriler seçilip uygun biçimde yazılmış ve göndermeye hazır hale getirilmiştir.

Veriler ysAjax fonksiyonu kullanılarak gönderme işlemi yapılmıştır.

Fonksiyonun son parametresi gönderme işlemi sonucunu parametre olarak veren bir fonksiyon almaktadır.

Bu fonksiyon kullanılarak işlem sonucu ile ilgili bilgi alınabilir.

Sonuca sonuc.response, sonuc.responseText gibi özellikler kullanılarak erişilebilir.

Geri dönüş biçimi JSON olarak verildiği için JSON.parse metodu ile işlem sonucu da öğrenilebilir.

var gelenVeri = JSON.parse(sonuc.responseText);
alert(gelenVeri.sonuc);

Fonksiyon hakkında detaylı bilgi için JavaScript AJAX Kullanımı yazısına bakabilirsiniz.

Veri çekme

Ajax ile veri çekme işlemi veri ekleme işlemine göre daha kolaydır.

Amacımız AJAX ile veri çekme olduğundan verileri kendimiz hazırladık bu veriler veritabanından da alınmış olabilir.

<?php

$veriler = [
    ["adi" => "Yusuf", "soyadi" => "SEZER"],
    ["adi" => "Ramazan", "soyadi" => "SEZER"],
    ["adi" => "Sinan", "soyadi" => "SEZER"],
    ["adi" => "Mehmet", "soyadi" => "SEZER"]
];

if (isset($_GET['ajax'])) {
    echo yazdir($veriler, true);
} else {
    print_r(yazdir($veriler));
}

function yazdir($veri, $ajax = FALSE)
{
    if ($ajax) {
        header("Content-type: application/json; charset=UTF-8");
        return json_encode(["sonuc" => $veri]);
    } else {
        return $veri;
    }
}

?>

PHP ile verileri JSON biçimine çevirmek içi json_encode fonksiyonu kullanılır.

JSON boyutunun XML yapısına göre az olması ve kullanım kolaylığından dolayı tercih edilir.

Detaylı bilgi için JSON Nedir? yazısına bakabilirsiniz.

Veri çekme işleminde en önemli kısım verinin Ajax ile alınıp uygun bir şekilde sayfaya yerleştirilmesidir.

<p id="veriler"></p>
<script>
'use strict';
  window.addEventListener("load", getir);

  function getir() {
    var veriler = document.querySelector("#veriler");

    ysAjax("veriler.php?ajax=true", "GET", null, function (sonuc) {
      console.log(sonuc);
    });
  }
</script>

Veri çekme işlemi sayfa yüklendiğinde yapılmasını istediğimiz için window nesnesinin load olayında getir fonksiyonunun çalışmasını sağladık.

Fonksiyonda verilerin ekleneceği alan seçilerek ysAjax fonksiyonu ile veri çekme işlemi yapılmıştır.

Fonksiyonun son parametresi veri çekme işlemi sonucunu parametre olarak veren bir fonksiyon almaktadır.

Bu fonksiyon kullanılarak çekilen verilere sayfaya yerleştirilir.

Verilere sonuc.response, sonuc.responseText gibi özellikler kullanılarak erişilebilir.

Geri dönüş biçimi JSON olarak verildiği için JSON.parse metodu ile alınan veriler işlenebilir hale getirilir.

var gelenVeriler = JSON.parse(sonuc.responseText);

for (var i = 0; i < gelenVeriler.sonuc.length; i++) {
  var kisi = gelenVeriler.sonuc[i];
  veriler.innerHTML += "Adı: " + kisi.adi;
  veriler.innerHTML += " Soyadı: " + kisi.soyadi;
  veriler.innerHTML += "<br/>";
}

Geri dönüş verinin bulunduğu açıklama sayfasından veya Postman, SOAPUI gibi araçlarla kontrol edilerek kullanılması faydalı olacaktır.

Alınan veriler sayfa yapısına göre örnekteki gibi sayfaya yerleştirilir.

Başka sayfadan veri çekme işlemi

Ajax ile veri çekme işleminde başka bir adresten veri çekerken web tarayıcı tarafından çeşitli kısıtlamalar olabilir.

CORS kullanımı

Bu durumda CORS (Cross-Origin Resource Sharing) olarak adlandırılan yapı kullanılabilir.

PHP ile CORS yapısına izin vermek için aşağıdaki kodun eklenmesi yeterli olacaktır.

header("Access-Control-Allow-Origin: *");

Yazdırma fonksiyon içeriği aşağıdaki gibi olacaktır.

function yazdir($veri, $ajax = FALSE)
{
    if ($ajax) {
        header("Access-Control-Allow-Origin: *");
        header("Content-type: application/json; charset=UTF-8");
        return json_encode(["sonuc" => $veri]);
    } else {
        return $veri;
    }
}

JSONP kullanımı

JSONP Ajax ile başka sayfadan veri çekme işlemi sırasında gelen kısıtlamayı aşmak için geliştirilen bir yöntemdir.

Yöntem temel olarak verileri belirlenen fonksiyona parametre olarak gönderir.

PHP ile JSONP yöntemini aşağıdaki gibi kullanılabilir.

function yazdir($veri, $ajax = FALSE)
{
    if ($ajax) {
        header("Content-type: application/json; charset=UTF-8");
        $json = json_encode(["sonuc" => $veri]);
        return isset($_GET['callback']) ? "{$_GET['callback']}($json)" : $json;
    } else {
        return $veri;
    }
}

Kullanımı aşağıdaki gibidir.

<script>
function getir(veriler) {
  console.log(veriler);
}
</script>
<script src="/veriler.php?ajax=true&callback=getir"></script>

Kullanım sırasında ilk olarak fonksiyon adının yazılması gerekir.

Alınan veriler sayfaya Ajax ile veri çekme işleminde olduğu gibi yerleştirilir.

Veri silme ve veri güncelleme

Ajax ile veri silme ve veri güncelleme işlemi veri ekleme işleminde olduğu gibi yapılır.

Sadece veri ekleme işlemi yerine veritabanına veri silme ve veri güncelleme komutları gönderilir.

Ajax dosya yükleme

PHP tabanlı web sayfalarında ajax ile dosya yükleme işlemi için öncelikle gerekli olan form hazırlanır.

<form action="yukleme" method="POST" enctype="multipart/form-data" name="dosyaYukleme">
  <input type="file" name="yuklenecek_dosya" required="required" />
  <input type="submit" />
</form>

NOT: Formdaki method değerinin POST ve enctype değerinin multipart/form-data olduğuna dikkat edin.

Form hazırlandıktan sonra dosya yükleme işleminin yapılacağı PHP komutları hazırlanır.

<?php

$ajax_kullanimi = isset($_POST['ajax']);

if (isset($_FILES['yuklenecek_dosya'])) {

    $sonuc = move_uploaded_file($_FILES["yuklenecek_dosya"]["tmp_name"], $_FILES["yuklenecek_dosya"]["name"]);
    $islem_sonucu = $sonuc ? "Dosya başarıyla yüklendi." : "Hata oluştu.";

} else {
    $islem_sonucu = "Lütfen bir dosya seçin.";
}

die(yazdir($islem_sonucu, $ajax_kullanimi));

function yazdir($veri, $ajax = FALSE)
{
    if ($ajax) {
        header("Content-type: application/json; charset=UTF-8");
        return json_encode(["sonuc" => $veri]);
    } else {
        return $veri;
    }
}

?>

Dosya yükleme işlemi ile ilgili detaylı bilgi için PHP Dosya Yükleme yazıma bakabilirsiniz.

Dosya yükleme işlemi için gerekli olan PHP komutları hazırlandıktan sonra Ajax ile dosya gönderme işlemi yapılır.

<script>
'use strict';
  var dosyaYukleme = document.forms["dosyaYukleme"];
  dosyaYukleme.addEventListener('submit', yukle);

  function yukle(event) {
    event.preventDefault();

    var veriler = new FormData(event.target);
    veriler.append('ajax', true);

    ysAjax('/yukle.php', 'POST', veriler, function (sonuc) {
      console.log(sonuc.responseText);
    });
  }
</script>

Dosya yükleme işleminde form seçilmiş ve form bilgilerini gönderme başlayınca yukle isimli fonksiyonun çalıştırılması sağlanmıştır.

Fonksiyon ilk olarak gönderme işlemini preventDefault ile iptal etmiştir.

Daha sonra formdaki veriler FormData ile yüklenmeye hazır hale getirilmiştir.

Veriler ysAjax fonksiyonu kullanılarak gönderme işlemi yapılmıştır.

Fonksiyonun son parametresi gönderme işlemi sonucunu parametre olarak veren bir fonksiyon almaktadır.

Bu fonksiyon kullanılarak işlem sonucu ile ilgili bilgi alınabilir.

Sonuca sonuc.response, sonuc.responseText gibi özellikler kullanılarak erişilebilir.

PHP Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Facebook
Linkedin
X
WhatsApp
Telegram
E-Posta ile paylaş
Yazdır

Bunlarda ilgini çekebilir