幾行代碼輕松實(shí)現(xiàn)PHP文件打包下載zip
805
2024-01-10
在網(wǎng)頁開發(fā)過程中,選擇省市的時(shí)候,省市之間有關(guān)聯(lián),這是一個(gè)小小的二級(jí)聯(lián)動(dòng)案例 ,運(yùn)用到HTML、css、php、js以及
AJAX的異步請(qǐng)求
首先建立city.php和province.php文件和connet.html,將二級(jí)聯(lián)動(dòng)的大概結(jié)構(gòu)寫出來,html代碼如下:
<label>省份:</label> <select id="province"> <option>請(qǐng)選擇</option> </select> <label>城市:</label> <select id="city"> <option>請(qǐng)選擇</option> </select>
js代碼以及ajax請(qǐng)求如下:
<script> // 通過Ajax從服務(wù)器端獲取數(shù)據(jù) var provinceElement = document.getElementById("province"); window.onload = function(){ // 創(chuàng)建核心對(duì)象 var xhr = getXhr(); // 監(jiān)聽 xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ //吉林省,遼寧省,山東省 var data = xhr.responseText; // 處理數(shù)據(jù) var arr = data.split(','); for(var i=0;i<arr.length;i++){ // <option>請(qǐng)選擇</option> var opt = document.createElement("option"); var text = document.createTextNode(arr[i]); opt.appendChild(text); provinceElement.appendChild(opt); } } } // 建立連接 xhr.open("get","province.php"); // 發(fā)送數(shù)據(jù) xhr.send(null); } // 2. 用戶選擇不同的省份 provinceElement.onchange = function(){ // a. 清除城市列表 var cityElement = document.getElementById("city"); var opts = cityElement.getElementsByTagName("option"); for(var i=1;i<opts.length;i++){ cityElement.removeChild(opts[i]); i--; } // b. 得到用戶選擇的值(省份) var provinceValue = this.value; if(provinceValue == "請(qǐng)選擇"){ return false; } // c. 通過Ajax根據(jù)省份獲取城市 var xhr = getXhr(); xhr.open("post","city.php"); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("province="+provinceValue); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var data = xhr.responseText; var arr = data.split(","); for(var i=0;i<arr.length;i++){ // <option>城市</option> var opt = document.createElement("option"); var text = document.createTextNode(arr[i]); opt.appendChild(text); cityElement.appendChild(opt); } } } } function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; } </script> province.php代碼如下: <?php // 將省份信息進(jìn)行響應(yīng) echo '吉林省,遼寧省,山東省'; ?>
city.php代碼如下:
<?php // 1. 接收客戶端的請(qǐng)求數(shù)據(jù) $province = $_POST['province']; // 2. 根據(jù)省份的不同,提供不同的城市 switch ($province){ case '吉林省': echo '長春市,松原市,白山市,通化市,遼源市'; break; case '遼寧省': echo '沈陽市,大連市,錦州市,鐵嶺市,丹東市'; break; case '山東省': echo '濟(jì)南市,青島市,威海市,日照市,德州市'; break; }
最終的界面圖如下:
以上所述是小編給大家介紹的省市二級(jí)聯(lián)動(dòng)小案例,希望對(duì)大家有所幫助,如果大家想了解更多內(nèi)容,敬請(qǐng)關(guān)注綠夏網(wǎng)!
#免責(zé)聲明#
本站[綠夏技術(shù)導(dǎo)航]提供的一切軟件、教程和內(nèi)容信息僅限用于學(xué)習(xí)和研究目的;不得將上述內(nèi)容用于商業(yè)或者非法用途,否則,一切后果請(qǐng)用戶自負(fù)。本站信息來自網(wǎng)絡(luò)收集整理,版權(quán)爭(zhēng)議與本站無關(guān)。您必須在下載后的24個(gè)小時(shí)之內(nèi),從您的電腦或手機(jī)中徹底刪除上述內(nèi)容。如果您喜歡該程序或內(nèi)容,請(qǐng)支持正版,購買注冊(cè),得到更好的正版服務(wù)。我們非常重視版權(quán)問題,如有侵權(quán)請(qǐng)郵件[admin@lxwl520.com]與我們聯(lián)系進(jìn)行刪除處理。敬請(qǐng)諒解!