BG MVC Model View Controller eğitim serisi yayında...

Ana sayfa > Programlama > PHP > PHP örnek kodlar > php_ornek00002

PHP örnek kodlar

PHP, AJAX ve Jquery kullanarak POST işlemi ile sunucu iletişimi

Aşağıdaki örnek, kullanıcı seçim kutusunda bir değişiklik yaptığında, bir web sayfasının PHP, AJAX ve Jquery kullanarak sunucu ile haberleşmesini göstermektedir.

Aşağıdaki dosya bir web tarayıcısında ilk açıldığında, bir etiket (Adı:), isimlerin seçilebileceği bir seçim kutusu ve içinde lname id değerine sahip bir paragraf elemanı (Soyadı:) gösterilir.

Kullanıcı seçim kutusundan bir isim seçtiğinde, işlemler aşağıdaki sıra ile gerçekleşir:

  • İlk olarak, change() fonksiyonu çalıştırılır.
  • ajax() fonksiyonu POST yöntemiyle çağrılarak, seçim kutusunun seçili değeri name parametre adı ile sunucudaki getdata.php dosyasına gönderilir.
  • .done() altında sunucunun döndüreceği değer hazır olduğunda çalıştırılacak fonksiyon oluşturulur.
  • İsteği alan getdata.php dosyası, name isimli bir parametre tanımlanıp tanımlanmadığını kontrol eder.
  • Parametre tanımlandığı için, $names adlı dizi içinde bu parametre değeri anahtar olarak varsa, bu anahtara karşılık gelen değeri yoksa, "Bulunamadı" ifadesini ekrana yazar.
  • Böylece, sunucu tarafında işlem tamamlanmış olur ve elde edilen değer geri döndürülür.
  • change() fonksiyonu içinde oluşturulan ve sunucunun bir sonuç döndürmesini bekleyen fonksiyon devreye girer ve gönderilen değeri lname id değerine sahip html elemanına atar.

Seçim kutusundan "Nedim" ismini seçtiğimizde tarayıcı ekran görüntüsü aşağıdaki şekilde olacaktır:

Aşağıda gösterilen index.php ana işlem dosyasıdır.


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
    
  $('#fname').change(function() {
	 $.ajax({ 
	     method: "POST",
		 url: "getdata.php",
		 data: { name : $(this).find('option:selected').val() }
	  })
		.done(function(result) {		   
		   $('#data').text(result);	
		})
  });	  

});
</script>

</head>

<body>

  <label for="fname">Adı:</label>
  <select id="fname" name="fname">
	 <option value=""></option>
	 <option value="Ahmet">Ahmet</option>
	 <option value="İbrahim">İbrahim</option>
	 <option value="Leyla">Leyla</option>
	 <option value="Mecnun">Mecnun</option>
	 <option value="Nedim">Nedim</option>
  </select>  

  <p><span style="font-weight:bold;">Soyadı:</span> <span id="lname"></span></p>
  
</body>
</html>

Aşağıda gösterilen getdata.php dosyası, ana işlem dosyası index.php'den gönderilen POST değerine göre sunucuda işlem yapan ve elde ettiği değeri tekrar index.php'ye geri döndüren sunucu işlem dosyasıdır.


<?php
  if(isset($_POST['name'])) { 
	 $param = $_POST['name'];
	   
	 $names = [ "Ahmet" => "Sakin", "İbrahim" => "Şen", "Leyla" => "Özer", "Mecnun" => "Uzak", "Nedim" => "Tezel" ];
	 echo array_key_exists($param, $names) ? $names[$param] : 'Bulunamadı';   
  }	 
?>