示例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实现交互的详细内容，更多内容请关注技术你好其它相关文章！