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:
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ı';
}
?>