Ajax异步传输与PHP实现交互示例

前端技术 2023/09/06 AJAX
背景

前台页面两个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\";//显示学院信息的div
}else{
document.getElementById(\"collegeinfo\").style.display=\"none\";//隐藏学院信息的div
}
}
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\";//显示专业信息的div
}else{
document.getElementById(\"majorinfo\").style.display=\"none\";//隐藏专业信息的div
}
}
function ajaxok2()
{
if(xmlHttp.readyState == 4 && xmlHttp.status==200)
{
document.getElementById(\"majorinfo\").innerHTML = xmlHttp.responseText;
}
}

</script>

本文地址:https://www.stayed.cn/item/16898

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。