Ajax 비동기 전송 및 PHP 상호 작용 예

Background
첫 페이지에는 두 개의 선택 상자가 있습니다. 하나는 대학과 연결되고 다른 하나는 전공과 연결됩니다. 이제 대학 관련 정보를 표시하려면 대학 선택 상자를 선택해야 합니다. 전공 선택 상자에는 해당 대학에 속한 전공 이름만 있습니다. 즉, 2차 연결 효과를 달성하는 것입니다.
Onchange 이벤트는 각각 두 개의 선택 항목에 정의되어 있으며, 이벤트에서 ajax GET 메서드를 사용하여 정보를 백그라운드 PHP에 제출한 다음 쿼리된 정보가 출력되거나 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 상호 작용 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!