成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置：首頁技術(shù)文章
文章詳情頁

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

瀏覽：65日期：2022-06-12 11:12:25

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

效果圖

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

selsect.php

<?php     /*    省市縣后臺數(shù)據(jù)接口 接口調(diào)用規(guī)則： 1.參數(shù)一：flag，用來區(qū)分請求的是省市縣中間的那種數(shù)據(jù) 2.參數(shù)二:選擇省的時(shí)候傳遞pid，選擇市的時(shí)候傳遞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ù)請求。因?yàn)檎埱蟮姆?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方法請求時(shí)，如果第二次ajax請求依賴于第一次請求的結(jié)果，那么第二次請求必須放到回調(diào)函數(shù)內(nèi)部，這是因?yàn)閍jax 異步 請求。

類似于這樣

$.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>日出時(shí)間:"+data.sunrise+"</li><li>日落時(shí)間:"+data.sunset+"</li><li>緯度:"+data.latitude+"</li><li>經(jīng)度:"+data.longitude+"</li></ul>"   $("#info").html(tag);   }  }) }})

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

標(biāo)簽： Ajax