這篇文章主要介紹了Ajax實現(xiàn)城市二級聯(lián)動d，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡營銷推廣、網(wǎng)站重做改版、浙江網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5場景定制、商城開發(fā)、集團公司官網(wǎng)建設、外貿網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為浙江等各大城市提供網(wǎng)站開發(fā)制作服務。

1、html

<select id="province">
 <option>請選擇</option>
 </select>
 <select id="city">
 <option>請選擇</option>
 </select>

2、javascript

//創(chuàng)建獲取ajax核心對象的函數(shù)
  function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
   }else{
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   return xhr;
  }
  var xhr = getXhr();
  // 第一次執(zhí)行Ajax異步請求 - 省份
  window.onload = function(){
   xhr.open("get","finaly.php?state=1");
   xhr.send(null);
   xhr.onreadystatechange = function(){
   if(xhr.readyState==4&&xhr.status==200){
     var data = xhr.responseText;
     // 將字符串轉換為數(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);
     }
    } 
   }
  };
  // 第二次執(zhí)行Ajax異步請求 - 城市
  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 != "請選擇"){
    xhr.open("post","finaly.php");
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send("state=2&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);
      }
     }
    }
   }
  };

3、finaly.php

<?php
 // 接收客戶端發(fā)送的請求數(shù)據(jù) - state
 $state = $_REQUEST['state'];
 // 判斷$state的值
 if($state == 1){// 獲取省份
  echo '山東省,遼寧省,吉林省';
 }else{// 獲取城市
  $province = $_POST['province'];
  switch ($province){
   case '山東省':
    echo '青島市,濟南市,威海市,日照市,德州市';
    break;
   case '遼寧省':
    echo '沈陽市,大連市,鐵嶺市,丹東市,錦州市';
    break;
   case '吉林省':
    echo '長春市,松原市,吉林市,通化市,四平市';
    break;
  }
 }
?>

什么是ajax

ajax是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術，可以通過在后臺與服務器進行少量數(shù)據(jù)交換，使網(wǎng)頁實現(xiàn)異步更新。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Ajax實現(xiàn)城市二級聯(lián)動d”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設公司，，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

網(wǎng)頁標題：Ajax實現(xiàn)城市二級聯(lián)動d-創(chuàng)新互聯(lián)
路徑分享：http://www.rwnh.cn/article38/doecsp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、外貿建站、搜索引擎優(yōu)化、Google、移動網(wǎng)站建設、關鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)