背景
前台頁面兩個select框，一個與學院關聯，另一個與專業關聯，現需要選擇學院select框後，顯示學院相關信息，且專業select以下僅有屬於該學院的專業名稱。也就是實現一個二級連動效果。
兩個select裡面分別定義onchange事件，事件中利用ajax的GET方法向後台PHP遞交訊息，再將查詢得到的訊息echo出來或document.write。
註：程式碼參考了有位叫y0umer的部落客寫的。
程式碼如下：
<script type="text/javascript">
var XmlHttp;
function createXmlHttpRequestObject(){
if(window.ActiveXobject){ // 判断是否是ie浏览器
try { // try开始
xmlhttp = new ActiveXobject("Microsoft.XMLHTTP"); // 使用ActiveX对象创建ajax
}catch(e){
xmlHttp = false;
} // try end
}else{ //Chrome、FireFox等非ie内核
try{
xmlHttp = new XMLHttpRequest(); //视为非ie情况下
}catch(e){
xmlHttp = false; // 其他非主流浏览器
}
} // 判断结束,如果创建成功则返回一个DOM对象,如果创建不成功则返回一个false
if(xmlHttp)
{
return xmlHttp;
}else{
alert("对象创建失败,请检查浏览器是否支持XmlHttpRequest!");
}
} // 函数体
//学院下拉框事件
function showCollegeInfo(){
var selectIndex = document.getElementById("college").selectedIndex;//获得是第几个被选中了
var value = document.getElementById("college").options[selectIndex].value;
if(value)
{
// 先创建一个对象实例
createXmlHttpRequestObject();
// 使用事件对象获取文本框ID的值
var vCollege = value;
var url = "college.php?xy="+vCollege; //待发送URL
url=encodeURI(url);
xmlHttp.onreadystatechange=ajaxok; // 判断浏览器状态栏 (接收玩数据触发的事件)
xmlHttp.open("GET",url,false); // GET向服务器端发送数据
xmlHttp.send(null);
document.getElementById("collegeinfo").style.display="block";//显示学院信息的p
}else{
document.getElementById("collegeinfo").style.display="none";//隐藏学院信息的p
}
}
function ajaxok()
{
if(xmlHttp.readyState == 4 && xmlHttp.status==200)
{
document.getElementById("collegeinfo").innerHTML = xmlHttp.responseText;
}
}
//专业下拉框事件
function showMajorInfo(){
var selectIndex = document.getElementById("major").selectedIndex;//获得是第几个被选中了
var value = document.getElementById("major").options[selectIndex].value;
if(value)
{
// 先创建一个对象实例
createXmlHttpRequestObject();
// 使用事件对象获取文本框ID的值
var vMajor = value;
var url = "major.php?zy="+vMajor; //待发送URL
url=encodeURI(url);
xmlHttp.onreadystatechange=ajaxok2; // 判断浏览器状态栏 (接收玩数据触发的事件)
xmlHttp.open("GET",url,false); // GET向服务器端发送数据
xmlHttp.send(null);
document.getElementById("majorinfo").style.display="block";//显示专业信息的p
}else{
document.getElementById("majorinfo").style.display="none";//隐藏专业信息的p
}
}
function ajaxok2()
{
if(xmlHttp.readyState == 4 && xmlHttp.status==200)
{
document.getElementById("majorinfo").innerHTML = xmlHttp.responseText;
}
}
</script>#相關學習推薦：PHP程式設計從入門到精通
以上是範例Ajax異步傳輸與PHP實作交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！
