Ajax异步传输与PHP实现交互的案例分析

发布时间:2020-07-18 10:11:24 作者:清晨
来源:亿速云 阅读:107

这篇文章主要介绍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>

以上是Ajax异步传输与PHP实现交互的案例分析的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. PHP与WEB服务器交互的案例分析
  2. JavaScript中怎么实现Ajax与后端交互数据

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

php ajax 异步传输

上一篇:Python中用wx模块创建文本编辑器的方法

下一篇:jsdt-jquery 的用法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》