AJAX實現(xiàn)省市縣三級聯(lián)動效果

更新時間：2021年10月13日 17:17:30 作者：不爭亦不屑

這篇文章主要為大家詳細(xì)介紹了AJAX實現(xiàn)省市縣三級聯(lián)動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近在學(xué)AJAX做到這個省市縣三級聯(lián)動的案例，這里只是講一下ajax請求的一些知識，對服務(wù)端數(shù)據(jù).php文件就不敘述了。
（tips:其實省市縣三級聯(lián)動只需要引入jQuery省市縣三級聯(lián)動插件就可以實現(xiàn)）

效果圖

首先準(zhǔn)備兩個服務(wù)端文件，另一個文件太長，這里就不導(dǎo)入了

selsect.php

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

    $flag = $_GET['flag'];
    // 省級數(shù)據(jù)
    if($flag == 1){
        echo json_encode($province);
    // 市級數(shù)據(jù)
    }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);
    // 縣級數(shù)據(jù)
    }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 方法進(jìn)行數(shù)據(jù)請求。因為請求的服務(wù)端文件跟當(dāng)前文件同源，所以不需要進(jìn)行跨域請求。

<!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(){
     // 避免數(shù)據(jù)疊加
     $('#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請求依賴于第一次請求的結(jié)果，那么第二次請求必須放到回調(diào)函數(shù)內(nèi)部，這是因為ajax 異步請求。

類似于這樣

$.ajax({
 type:'get',
 url:'citycode.php',
 data:{cityName:city},
 dataType:'json',
 // 如果第二次ajax請求依賴于第一次請求的結(jié)果，那么第二次請求必須放到回調(diào)函數(shù)內(nèi)部
 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>風(fēng)向:'+data.WD+'</li><li>風(fēng)級:'+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>經(jīng)度:'+data.longitude+'</li></ul>'
   $('#info').html(tag);
   }
  })
 }
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: