AJAX實現省市縣三級聯動效果
最近在學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);
}
})
}
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持碩編程。
學習AJAX