快捷導(dǎo)航

Ajax異步傳輸與PHP實(shí)現(xiàn)交互示例

更新時(shí)間：2014年01月27日 15:52:47 作者：

Ajax異步傳輸想必大家并不陌生吧，下面為大家介紹下與PHP實(shí)現(xiàn)交互的示例，大家不要錯(cuò)過(guò)

背景

前臺(tái)頁(yè)面兩個(gè)select框，一個(gè)與學(xué)院關(guān)聯(lián)，另一個(gè)與專(zhuān)業(yè)關(guān)聯(lián)，現(xiàn)需要選擇學(xué)院select框后，顯示學(xué)院相關(guān)信息，且專(zhuān)業(yè)select下面僅有屬于該學(xué)院的專(zhuān)業(yè)名稱。也就是實(shí)現(xiàn)一個(gè)二級(jí)聯(lián)動(dòng)效果。

兩個(gè)select里面分別定義onchange事件，事件中利用ajax的GET方法向后臺(tái)PHP遞交信息，再將查詢得到的信息echo出來(lái)或document.write。

注：代碼參考了有位叫y0umer的博主寫(xiě)的。

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
var XmlHttp; 
function createXmlHttpRequestObject(){ 
if(window.ActiveXobject){ // 判斷是否是ie瀏覽器 
try { // try開(kāi)始 
xmlhttp = new ActiveXobject("Microsoft.XMLHTTP"); // 使用ActiveX對(duì)象創(chuàng)建ajax 
}catch(e){ 
xmlHttp = false; 
} // try end 
}else{ //Chrome、FireFox等非ie內(nèi)核 
try{ 
xmlHttp = new XMLHttpRequest(); //視為非ie情況下 
}catch(e){ 
xmlHttp = false; // 其他非主流瀏覽器 
} 
} // 判斷結(jié)束,如果創(chuàng)建成功則返回一個(gè)DOM對(duì)象,如果創(chuàng)建不成功則返回一個(gè)false 

if(xmlHttp) 
{ 
return xmlHttp; 
}else{ 
alert("對(duì)象創(chuàng)建失敗,請(qǐng)檢查瀏覽器是否支持XmlHttpRequest!"); 
} 

} // 函數(shù)體 
//學(xué)院下拉框事件 
function showCollegeInfo(){ 
var selectIndex = document.getElementById("college").selectedIndex;//獲得是第幾個(gè)被選中了 
var value = document.getElementById("college").options[selectIndex].value; 
if(value) 
{ 
// 先創(chuàng)建一個(gè)對(duì)象實(shí)例 
createXmlHttpRequestObject(); 
// 使用事件對(duì)象獲取文本框ID的值 
var vCollege = value; 

var url = "college.php?xy="+vCollege; //待發(fā)送URL 
url=encodeURI(url); 
xmlHttp.onreadystatechange=ajaxok; // 判斷瀏覽器狀態(tài)欄 (接收玩數(shù)據(jù)觸發(fā)的事件) 
xmlHttp.open("GET",url,false); // GET向服務(wù)器端發(fā)送數(shù)據(jù) 
xmlHttp.send(null); 
document.getElementById("collegeinfo").style.display="block";//顯示學(xué)院信息的div 
}else{ 
document.getElementById("collegeinfo").style.display="none";//隱藏學(xué)院信息的div 
} 
} 
function ajaxok() 
{ 
if(xmlHttp.readyState == 4 && xmlHttp.status==200) 
{ 
document.getElementById("collegeinfo").innerHTML = xmlHttp.responseText; 
} 
} 
//專(zhuān)業(yè)下拉框事件 
function showMajorInfo(){ 
var selectIndex = document.getElementById("major").selectedIndex;//獲得是第幾個(gè)被選中了 
var value = document.getElementById("major").options[selectIndex].value; 
if(value) 
{ 
// 先創(chuàng)建一個(gè)對(duì)象實(shí)例 
createXmlHttpRequestObject(); 
// 使用事件對(duì)象獲取文本框ID的值 
var vMajor = value; 

var url = "major.php?zy="+vMajor; //待發(fā)送URL 
url=encodeURI(url); 
xmlHttp.onreadystatechange=ajaxok2; // 判斷瀏覽器狀態(tài)欄 (接收玩數(shù)據(jù)觸發(fā)的事件) 
xmlHttp.open("GET",url,false); // GET向服務(wù)器端發(fā)送數(shù)據(jù) 
xmlHttp.send(null); 
document.getElementById("majorinfo").style.display="block";//顯示專(zhuān)業(yè)信息的div 
}else{ 
document.getElementById("majorinfo").style.display="none";//隱藏專(zhuān)業(yè)信息的div 
} 
} 
function ajaxok2() 
{ 
if(xmlHttp.readyState == 4 && xmlHttp.status==200) 
{ 
document.getElementById("majorinfo").innerHTML = xmlHttp.responseText; 
} 
} 

</script> 