두 번째 수준에서 지방 및 지방 자치 단체의 작은 사례에 대한 설명

웹 개발 과정에서 지방과 도시를 선택할 때 지방과 도시의 관계는 HTML, CSS, PHP, JS 및

Ajax의 비동기 요청

먼저 City.php and Province.php Files와 Connet.html을 만들고 2 차 연결의 일반적인 구조를 작성하십시오. HTML 코드는 다음과 같습니다.

 <lable> province : </label> <select id = "province"> <옵션> 선택하십시오 </옵션> </select> <label> city : </label> <id = "city"> <plion> 선택하십시오 </옵션> </select>를 선택하십시오

JS 코드 및 AJAX 요청은 다음과 같습니다.

 <cript> // ajax var provinceelement = docum Liaoning Province, Shandong Province var data = xhr.responsetext; // 프로세스 데이터 var arr = data.split ( ','); for (var i = 0; i <arr.length; i ++) {// <sollect> </옵션> var opt = document.createelement ( "옵션")를 선택하십시오. var text = document.creatextNode (arr [i]); opt.appendchild (텍스트); ProvinceElement.appendChild (opt);}}} // 연결을 만듭니다 xhr.open ( "get", "province.php"); // 데이터 보내기 xhr.send (null);} // 2. 사용자는 다른 지방 지방 요소를 선택합니다. 도시 목록 var cityElement = document.getElementById ( "city"); var opts = cityElement.getElementsByTagName ( "옵션"); for (var i = 1; i <opts.length; i ++) {ite cityElement.removeChild (opts [i]); i-;} // b. 사용자 (주) var provincevalue = this.value가 선택한 값을 얻으십시오. if (provicevalue == "please select") {return false;} // c. get get var xhr = getxhr (); xhr.open ( "post", "city.php"); xhr.setRequestHeader ( "content-type", "application/x-www-form-urlencoded"); xhr.send ( "province ="+provincevalue); xhr.onstatechange (). 4 && xhr.status == 200) {var data = xhr.responsetext; var arr = data.split ( ","); for (var i = 0; i <arr.length; i ++) {// <solfite> city </옵션> var opt = document.createElement ( "옵션"); var text = document.creatextNode (arr [i]); opt.appendchild (텍스트); cityElement.appendChild (opt);}}}} 함수 getxhr () {var xhr = null; if (wind xhr;} </script> province.php 코드는 다음과 같습니다. <? php // 지방에 응답하십시오.

City.php 코드는 다음과 같습니다.

 <? php // 1. 클라이언트 요청 데이터를 받으십시오 $ province = $ _post [ 'province']; // 2. 다른 도시 스위치 제공 ($ province) {케이스 'Jilin Province': Echo 'Changchun City, Songyuan City, Baishan City, Tonghua City, Liaoyuan City'; Liaoning Prov '; Jinzhou City, Dandong City '; Break; Case'Shandong Province ': Echo'Echo 'Jinan City, Qingdao City, Weihai City, Rizhao City, Dezhou City'; Break;}

최종 인터페이스 다이어그램은 다음과 같습니다.

위의 것은 편집자가 소개 한 두 번째 레벨에서 지방 및 지방 자치 단체의 작은 사례입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 더 알고 싶다면 Wulin.com에주의를 기울이십시오!