Beispiel für asynchrone Ajax-Übertragung und PHP-Interaktion

Hintergrund
Auf der Startseite gibt es zwei Auswahlfelder, eines ist mit der Hochschule und das andere mit dem Hauptfach verknüpft. Jetzt müssen Sie das Auswahlfeld für die Hochschule auswählen um hochschulbezogene Informationen und die Auswahl der Hauptfächer anzuzeigen. Nachfolgend sind nur die Namen der Hauptfächer aufgeführt, die zu diesem College gehören. Dadurch soll ein sekundärer Verknüpfungseffekt erzielt werden.
Onchange-Ereignisse werden jeweils in den beiden Selects definiert. In diesem Fall wird die Ajax-GET-Methode verwendet, um Informationen an das Hintergrund-PHP zu senden, und dann werden die abgefragten Informationen als Echo ausgegeben oder document.write.
Hinweis: Der Code basiert auf dem Code, der von einem Blogger namens y0umer geschrieben wurde.

Der Code lautet wie folgt:

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

Verwandte Lernempfehlungen: PHP-Programmierung vom Einstieg bis zur Beherrschung

Das obige ist der detaillierte Inhalt vonBeispiel für asynchrone Ajax-Übertragung und PHP-Interaktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!