示例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>

相关学习推荐：PHP编程从入门到精通

总结

以上是编程之家为你收集整理的示例Ajax异步传输与PHP实现交互全部内容，希望文章能够帮你解决示例Ajax异步传输与PHP实现交互所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。