Ajax異步傳輸與PHP實現交互的案例分析

這篇文章主要介紹Ajax異步傳輸與PHP實現交互的案例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

背景
前臺頁面兩個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>

以上是Ajax異步傳輸與PHP實現交互的案例分析的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！