如何利用AJAX制作省市县三级联动的功能
导读：这篇文章主要为大家详细介绍了如何利用AJAX制作省市县三级联动的功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望对大家学习或工作能有帮助。 最近在学AJAX做到这个省市县三级联动的案例，这里只是讲一下ajax...
这篇文章主要为大家详细介绍了如何利用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制作省市县三级联动的功能”的介绍了，感谢各位的阅读，希望文本对大家有所帮助。如果想要了解更多知识，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何利用AJAX制作省市县三级联动的功能
本文地址： https://pptw.com/jishu/653934.html