AJAX實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果
最近在學(xué)ajax做到這個(gè)省市縣三級(jí)聯(lián)動(dòng)的案例，這里只是講一下ajax請(qǐng)求的一些知識(shí)，對(duì)服務(wù)端數(shù)據(jù).php文件就不敘述了。
（tips:其實(shí)省市縣三級(jí)聯(lián)動(dòng)只需要引入jquery省市縣三級(jí)聯(lián)動(dòng)插件就可以實(shí)現(xiàn)）
效果圖
首先準(zhǔn)備兩個(gè)服務(wù)端文件，另一個(gè)文件太長(zhǎng)，這里就不導(dǎo)入了
selsect.php
<?php
/*
省市縣后臺(tái)數(shù)據(jù)接口
接口調(diào)用規(guī)則：
1.參數(shù)一：flag，用來(lái)區(qū)分請(qǐng)求的是省市縣中間的那種數(shù)據(jù)
2.參數(shù)二:選擇省的時(shí)候傳遞pid，選擇市的時(shí)候傳遞cid
http://localhost/select.php?flag=1#pid=23
*/
// include('./selectdata.php');
require('./selectdata.php');
// 省市縣數(shù)據(jù)來(lái)自selectdata.php文件
$province = $provincejson;
$city = $cityjson;
$county = $countyjson;
$flag = $_get['flag'];
// 省級(jí)數(shù)據(jù)
if($flag == 1){
echo json_encode($province);
// 市級(jí)數(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);
// 縣級(jí)數(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 請(qǐng)求，也可以用快捷方法 $.get 方法進(jìn)行數(shù)據(jù)請(qǐng)求。因?yàn)檎?qǐng)求的服務(wù)端文件跟當(dāng)前文件 同源 ，所以不需要進(jìn)行 跨域 請(qǐng)求。
<!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 >請(qǐng)選擇省...</option>
</select>
</label>
<label>
市:
<select id="city">
<option >請(qǐng)選擇市...</option>
</select>
</label>
<label>
縣:
<select id="county">
<option >請(qǐng)選擇縣...</option>
</select>
</label>
</div>
</body>
</html>
這里還需要說(shuō)明的是：使用$.ajax方法請(qǐng)求時(shí)，如果第二次ajax請(qǐng)求依賴于第一次請(qǐng)求的結(jié)果，那么第二次請(qǐng)求必須放到回調(diào)函數(shù)內(nèi)部，這是因?yàn)閍jax 異步 請(qǐng)求。
類似于這樣
$.ajax({
type:'get',
url:'citycode.php',
data:{cityname:city},
datatype:'json',
// 如果第二次ajax請(qǐng)求依賴于第一次請(qǐng)求的結(jié)果，那么第二次請(qǐng)求必須放到回調(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)級(jí):'+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);
}
})
}
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持碩編程。
學(xué)習(xí)AJAX