Pure JS:
document.getElementById('select').addEventListener('change', function(){
var xhr = new XMLHttpRequest();
xhr.open('POST', 'xhr-file.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.function() {
// success
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
} // error
else if (this.status >= 400) {
}
}
var selected_option = document.getElementById('select').options[e.selectedIndex].value; // selected value
xhr.send('value=' + selected_option);
});
Jquery:
$(document).on('change', '#select', function () {
var selected_option = $('#select option:selected').val(); // selected value
$.ajax({
url: 'ajax-file.php',
type: 'POST',
data: {value: selected_option},
dataType: 'json',
success: function (response) {
},
error: function (jqXHR, textStatus, errorThrown) {
printError(jqXHR, textStatus, errorThrown);
}
});
});
Uyarılar:
HTML'te align attribute'ü kaldırılmış.
PHP'de mysql ve mysqli (özellikle bunun) yerine PDO kullanmakta fayda var.
Son olarak event listener kullanmak yerine HTML etkileti üzerinden direkt fonksiyon tetiklemek doğru değil (style'ın da etiket üzerinde kullanılması gibi) çünkü eskiden gelen bir alışkanlık olsa da kaliteli bir bakış açısı değil, okumayı zorlaştırır.