背景
フロント ページには 2 つの選択ボックスがあり、1 つは大学に関連付けられ、もう 1 つは専攻に関連付けられています。次に、大学の選択ボックスを選択する必要があります。大学関連情報と専攻選択を表示します。 以下は、この大学に属する専攻名のみです。それは二次的な連鎖効果を達成することです。
Onchange イベントは 2 つの select でそれぞれ定義されており、このイベントでは、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 中国語 Web サイトの他の関連記事を参照してください。