示例Ajax异步传输与PHP实现交互
发布时间:09/01 来源:未知 浏览:
关键词:
背景
前台页面两个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实现交互的具体内容,更多请关注百分百源码网其它相关文章!