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

最近在學AJAX做到這個省市縣三級聯動的案例，這裡只是講一下ajax請求的一些知識，對服務端資料.檔案就不敘述了。
（tips:其實省市縣三級聯動只需要引入省市縣三級聯動外掛就可以實現）

效果圖

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

首先準備兩個服務端檔案，另一個檔案太長，這裡就不匯入了

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 = $provinceon;
    $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 $valuewww.cppcns.com 
) {
            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/" charset="utf-8"></script>
  <script type="text/script">
   $(function($){
    function queryData(obj,callback){
     // $.ajax({
     //  type:'get',//  url:'http://localhost/AJAX/select.php',//  data:obj,//  dataType:'json',//  success:function(data){
       
     //   callback(data);
     //  }
     // }AchCWJHtm 
);
     $.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 += '<oAchCWJHtmption value="' + e.id + '">' + e.province +'</option>'
     });
     $('#province').append(option);
    });
    $('#province').change(functio 
n(){
     // 避免資料疊加
     $('#city').find('option:gt(0)').remove();
     queryData({
      flag:2,pId:$(this).val()
     },function(data){
      var option = '';
      $.each(data,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()
     },e){
       option += '<option value="' + e.id + '">' + e.county +'</option>'
      });
      $('#county').append(option);
     });
    });
   });
  </script>
  <style type="text/">
   #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);
   }
  })
 }
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

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

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

Ajax實現省市縣三級聯動

js 實現省市縣三級聯動

用 js 實現省市縣三級聯動調取資料庫省市縣資料

JS實現省市縣三級下拉聯動

easypoi 省市縣三級聯動

jquery 省市縣三級聯動

微信小程式地區選擇器和省市縣三級聯動和button按鈕分享

記一次 PHP 省市縣三級聯動資料庫取值

Ajax實現三級聯動效果

django中上傳圖片分頁三級聯動效果的實現程式碼

jQuery實現簡單三級聯動效果

Android實現城市選擇三級聯動

Ajax實現頁面無重新整理留言效果

jquery+Ajax實現簡單分頁條效果

vue+element實現省區市三級聯動以及詳細地址的輸入

AJAX實現指定部分頁面重新整理效果

laravel ajax 實現省市區三級聯動

如何利用Ajax實現地區三級聯動詳解

ajax實現城市三級聯動

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

相關推薦