Php ve ajax multiple selectbox
- Ekim 12th, 2008
- Posted in Her Bişey... . Php
- Write comment
Uzun zaman önce başlığını açtığım ama ancak yazmaya fırsat bulduğum bu konuyu ekteki örnek dosya üzerinden açıklamaya çalışacağım.
Aşağıdaki kod lar ekte bulunan uygulamanın açıklamaları içindir , uygulamyı test etmek için ekteki dosyayı indirip bir server üzerinde test edebilirsiniz.
Aşağıdaki kod yardımıyla Php ve ajax multiple selectbox kategori , sanatçı , albüm örneğinin nasıl yapıldığını açıklamaya çalışacağım
kategori = müzik kategorilerinin listeleceği id
sanatci = seçilen kategoriye uygun olan sanatçıların listeleceği id
album = sanatçının albümlerinin listeleceği id
Inint_AJAX methodu ile ajax ‘ın sayfa yenilenmeden arkada çalışan getdata.php dosyası üzerinden istediğimiz bilgilerin görüntülenmesini sağlamak için kullandığıız method , bu methodu istediğniiz herhangi bir yerde include edebilirsiniz , bir değişklik yapmadan tüm ajax uygulamarınızda kullanabilceğiniz bir methoddur
icerik Bu fonksiyonu aşağıdaki kod üzerinden inceleyelim
index.php
<form action=”index.php” method=”POST” id=”uploadForm” name=”uploadForm” onsubmit=”return validateForm()” enctype=”multipart/form-data” class=”vdo-upload”>
<table border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr><td id=kategori>Liste Hazırlanıyor</td></tr>
<tr><td id=sanatci>Liste Hazırlanıyor</td></tr>
<tr><td id=album>Liste Hazırlanıyor</td></tr>
<tr><td><input type=”submit” value=”Yükle” class=”arama-mavi-btn”/></td></tr>
</table>
</form>
<script>
function Inint_AJAX() {
try { return new ActiveXObject(“Msxml2.XMLHTTP”); } catch(e) {} //IE
try { return new ActiveXObject(“Microsoft.XMLHTTP”); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert(“XMLHttpRequest not supported”);
return null;
};
function icerik(src, val) {
var req = Inint_AJAX(); //İlgili ajax methodu burada kuruluyor
req.onreadystatechange = function () {
if (req.readyState==4) { // getdata.php ye giderik bir hata mesajı almadan geri dönmeyi kontrol ediyor
if (req.status==200) { sorusuz olarak getdata.php ye gidildi ve geri dönüş verileri getirilerek bizim belittiğimiz <strong>src</strong> nesnesinin içeriğine yazıldı
document.getElementById(src).innerHTML=req.responseText;
}
}
};
req.open(“GET”, “getdata.php?data=”+src+”&val=”+val); // İlgili dataları alacağımız arka tarafta çalışan php dosyası ve hangi method ile data gönderileceği burada belirtiliyor Get yada POST methodu kullanılabilir
req.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded;charset=ISO-8859-9″); // Header ve encoding ayarı bu kod ile yapılıyor
req.send(null);
}
window.onLoad=icerik(‘kategori’, -1); //Sayfa yüklendiği anada ilk olarak gidip kategorileri getirmesi için bu kodu sayfamıza ekliyoruz , bu işlemi herhangi bir butonun onClick olayınada ekleyebiliriz.
</script>