AJAX實現省市縣三級聯動效果

Posted on by

最近在學AJAX做到這個省市縣三級聯動的案例，這裡隻是講一下ajax請求的一些知識，對服務端數據.php文件就不敘述瞭。
（tips:其實省市縣三級聯動隻需要引入jQuery省市縣三級聯動插件就可以實現）

效果圖

首先準備兩個服務端文件，另一個文件太長，這裡就不導入瞭

selsect.php

<?php 
    /*
    省市縣後臺數據接口
 接口調用規則：
 1.參數一：flag，用來區分請求的是省市縣中間的那種數據
 2.參數二:選擇省的時候傳遞pid，選擇市的時候傳遞cId
 http://localhost/select.php?flag=1#pId=23
    */
    // include('./selectdata.php');
    require('./selectdata.php');
    // 省市縣數據來自selectdata.php文件
    $province = $provinceJson;
    $city = $cityJson;
    $county = $countyJson;

    $flag = $_GET['flag'];
    // 省級數據
    if($flag == 1){
        echo json_encode($province);
    // 市級數據
    }else if($flag == 2){
        $pId = $_GET['pId'];
        $cityData = array();
        foreach ($city as $value) {
            if($value->id == $pId){
                // 直轄市
                array_push($cityData,$value);
                break;
            }else if($value->parent == $pId){
                // 非直轄市
                array_push($cityData,$value);
            }
        }
        echo json_encode($cityData);
    // 縣級數據
    }else if($flag == 3){
        $cId = $_GET['cId'];
        $countyData = array();
        foreach ($county as $value) {
            if($value->parent == $cId){
                array_push($countyData,$value);
            }
        }
        echo json_encode($countyData);
    }
?>

select.html

這裡可以用 底層ajax 請求，也可以用快捷方法 $.get 方法進行數據請求。因為請求的服務端文件跟當前文件 同源 ，所以不需要進行 跨域 請求。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function($){
    function queryData(obj,callback){
     // $.ajax({
     //  type:'get',
     //  url:'http://localhost/AJAX/select.php',
     //  data:obj,
     //  dataType:'json',
     //  success:function(data){
       
     //   callback(data);
     //  }
     // });
     $.get('http://localhost/AJAX/select.php',obj,function(data){
      callback(data);
     },'json');
    };
    queryData({
     flag:1
    },function(data){
     var option = '';
     $.each(data,function(i,e){
      option += '<option value="' + e.id + '">' + e.province +'</option>'
     });
     $('#province').append(option);
    });
    $('#province').change(function(){
     // 避免數據疊加
     $('#city').find('option:gt(0)').remove();
     queryData({
      flag:2,
      pId:$(this).val()
     },function(data){
      var option = '';
      $.each(data,function(i,e){
       option += '<option value="' + e.id + '">' + e.city +'</option>'
      });
      $('#city').append(option);
     });
    });
    $('#city').change(function(){
     $('#county').find('option:gt(0)').remove();
     queryData({
      flag:3,
      cId:$(this).val()
     },function(data){
      var option = '';
      $.each(data,function(i,e){
       option += '<option value="' + e.id + '">' + e.county +'</option>'
      });
      $('#county').append(option);
     });
    });
   });
  </script>
  <style type="text/css">
   #container{
    width: 500px;
    min-height: 300px;
    margin: auto;
    text-align: center;
    padding: 10px;
    
   }
  </style>
 </head>
 <body>
  <div id="container">
   <label>
    省:
    <select id="province">
     <option >請選擇省...</option>
    </select>
   </label>
   <label>
    市:
    <select id="city">
     <option >請選擇市...</option>
    </select>
   </label>
   <label>
    縣:
    <select id="county">
     <option >請選擇縣...</option>
    </select>
   </label>
  </div>
 </body>
</html>

這裡還需要說明的是：使用$.ajax方法請求時，如果第二次ajax請求依賴於第一次請求的結果，那麼第二次請求必須放到回調函數內部，這是因為ajax 異步 請求。

類似於這樣

$.ajax({
 type:'get',
 url:'citycode.php',
 data:{cityName:city},
 dataType:'json',
 // 如果第二次ajax請求依賴於第一次請求的結果，那麼第二次請求必須放到回調函數內部
 success:function(data){
  $.ajax({
   type:'get',
   url:'cityweather.php',
   data:{cityCode:data.cityCode},
   dataType:'json',
   success:function(res){
   data = res.retData;
   var tag = '<ul><li>風向:'+data.WD+'</li><li>風級:'+data.WS+'</li><li>海拔:'+data.altitude+'</li><li>日期:'+data.date+'</li><li>最高溫度:'+data.h_tmp+'</li><li>最低溫度:'+data.l_tmp+'</li><li>平均溫度:'+data.temp+'</li><li>日出時間:'+data.sunrise+'</li><li>日落時間:'+data.sunset+'</li><li>緯度:'+data.latitude+'</li><li>經度:'+data.longitude+'</li></ul>'
   $('#info').html(tag);
   }
  })
 }
})

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：