Example Ajax asynchronous transmission and PHP interaction

Background
There are two select boxes on the front page, one is associated with the college and the other is associated with the major. Now you need to select the college select box to display college-related information and major selection Below are only the names of majors belonging to this college. That is to achieve a secondary linkage effect.
Onchange events are defined in the two selects respectively. In the event, the ajax GET method is used to submit information to the background PHP, and then the queried information is echoed out or document.write.
Note: The code refers to a blogger named y0umer.

The code is as follows:

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

Related learning recommendations:PHP programming from entry to proficiency

The above is the detailed content of Example Ajax asynchronous transmission and PHP interaction. For more information, please follow other related articles on the PHP Chinese website!