您好,登錄后才能下訂單哦!
小編給大家分享一下Ajax怎么實(shí)現(xiàn)城市二級(jí)聯(lián)動(dòng),相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
城市用ajax請(qǐng)求獲取并渲染,這里將省份也用ajax請(qǐng)求并渲染
1、HTML
<select id="province"> <option>請(qǐng)選擇</option> </select> <select id="city"> <option>請(qǐng)選擇</option> </select>
2、JS
/* * 省份信息和城市信息全部來源于服務(wù)器端 * * 第一種思路 - 基于前一個(gè)案例 * * 獲取省份信息,使用一次Ajax的異步請(qǐng)求 * * 根據(jù)省份信息,再次使用Ajax的異步請(qǐng)求 * * 第二種思路 - 重新思考 * * 一次性將省份和城市獲取 */ // a. 創(chuàng)建XMLHttpRequest對(duì)象 var xhr = getXhr(); // 第一種思路 - 基于前一個(gè)案例 // 1. 當(dāng)頁(yè)面加載時(shí),實(shí)現(xiàn)Ajax的異步請(qǐng)求 - 省份信息 window.onload = function(){ // b. 建立連接 - open("get","07_province.php"); xhr.open("get","07_province.php"); // c. 發(fā)送請(qǐng)求 - send(null) xhr.send(null); // d. 接收服務(wù)器端的數(shù)據(jù) xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ var data = xhr.responseText; // 將字符串轉(zhuǎn)換為數(shù)組 var provinces = data.split(","); // 遍歷數(shù)組 for(var i=0;i<provinces.length;i++){ // 創(chuàng)建option元素添加到id為province元素上 var option = document.createElement("option"); var text = document.createTextNode(provinces[i]); option.appendChild(text); var province = document.getElementById("province"); province.appendChild(option); } } } }; // 2. 當(dāng)用戶選擇省份信息時(shí),實(shí)現(xiàn)Ajax的異步請(qǐng)求 - 城市信息 var province = document.getElementById("province"); province.onchange = function(){ // 清空 var city = document.getElementById("city"); var opts = city.getElementsByTagName("option"); for(var z=opts.length-1;z>0;z--){ city.removeChild(opts[z]); } if(province.value != "請(qǐng)選擇"){ xhr.open("post","07_cities.php"); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("province="+province.value); xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ var data = xhr.responseText; var cities = data.split(","); for(var i=0;i<cities.length;i++){ var option = document.createElement("option"); var text = document.createTextNode(cities[i]); option.appendChild(text); city.appendChild(option); } } } } }; //定義獲取Ajax核心對(duì)象的函數(shù) function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; }
3、province.php
<?php echo '山東省,遼寧省,吉林省'; ?>
cities.pnp
<?php // 用于處理客戶端請(qǐng)求二級(jí)聯(lián)動(dòng)的數(shù)據(jù) // 1. 接收客戶端發(fā)送的省份信息 $province = $_POST['province']; // 2. 判斷當(dāng)前的省份信息,提供不同的城市信息 switch ($province){ case '山東省': echo '青島市,濟(jì)南市,威海市,日照市,德州市'; break; case '遼寧省': echo '沈陽(yáng)市,大連市,鐵嶺市,丹東市,錦州市'; break; case '吉林省': echo '長(zhǎng)春市,松原市,吉林市,通化市,四平市'; break; } // 服務(wù)器端響應(yīng)的是字符串 ?>
以上是“Ajax怎么實(shí)現(xiàn)城市二級(jí)聯(lián)動(dòng)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。