背景
前臺(tái)頁面兩個(gè)select框,一個(gè)與學(xué)院關(guān)聯(lián),另一個(gè)與專業(yè)關(guān)聯(lián),現(xiàn)需要選擇學(xué)院select框后,顯示學(xué)院相關(guān)信息,且專業(yè)select下面僅有屬于該學(xué)院的專業(yè)名稱。也就是實(shí)現(xiàn)一個(gè)二級(jí)聯(lián)動(dòng)效果。
兩個(gè)select里面分別定義onchange事件,事件中利用ajax的GET方法向后臺(tái)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對(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)建失敗,請檢查瀏覽器是否支持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é)院信息的p }else{ document.getElementById("collegeinfo").style.display="none";//隱藏學(xué)院信息的p } } function ajaxok() { if(xmlHttp.readyState == 4 && xmlHttp.status==200) { document.getElementById("collegeinfo").innerHTML = xmlHttp.responseText; } } //專業(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";//顯示專業(yè)信息的p }else{ document.getElementById("majorinfo").style.display="none";//隱藏專業(yè)信息的p } } function ajaxok2() { if(xmlHttp.readyState == 4 && xmlHttp.status==200) { document.getElementById("majorinfo").innerHTML = xmlHttp.responseText; } } </script>
標(biāo)題名稱:示例Ajax異步傳輸與PHP實(shí)現(xiàn)交互
文章來源:http://www.rwnh.cn/article34/cpspse.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、用戶體驗(yàn)、動(dòng)態(tài)網(wǎng)站、建站公司、關(guān)鍵詞優(yōu)化、營銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)