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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！