AJAX实现省市县三级联动效果
更新时间：2021年10月19日 08:28 点击：2009
最近在学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实现城市三级联动
相关文章
- ...2015-12-29
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
这篇文章主要介绍了JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法,涉及JavaScript页面元素定时滚动操作及ajax调用实现技巧,需要的朋友可以参考下...2016-04-19- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12
- 这篇文章主要为大家详细介绍了js实现ajax的用户简单登入功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-19
- 这篇文章主要为大家详细介绍了jquery Ajax实现Select动态添加数据的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-06-15
- 这篇文章主要为大家详细介绍了jQuery UI结合Ajax创建可定制的Web界面，如何利用Ajax和jQuery UI创建具有各种定制功能的高度可定制的UI，感兴趣的小伙伴们可以参考一下...2016-06-24
- 这篇文章主要为大家详细介绍了jquery+Ajax实现简单分页条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-06-17
- 今天我给大家分享的是在不刷新页面的前提下，使用PHP+jQuery+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片，然后图片自动上传到服务器上并展示在页面上。...2015-03-15
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
这篇文章主要介绍了Bootstrap进度条与AJAX后端数据传递结合使用,需要的朋友可以参考下...2017-04-27- 下面想就为大家带来一篇jquery ajax局部加载方法详解(实现代码)。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧...2016-05-14
- 这篇文章主要介绍了基于jquery实现省市区三级联动效果,需要的朋友可以参考下...2015-12-27
- 基本思想就是：在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息，代码有点长，但很多都是类似的，例如JS中省、市、区获取方法类似，PHP中通过参数不同执行不同的select语句。index.html代码：复制...2014-05-31
- 本文主要介绍了Ajax基本概念；Ajax的异步加载局部刷新功能的实现；通过XMLHttpRequest发送请求。具有很好的参考价值，下面跟着小编一起来看下吧...2017-02-19
- 这篇文章主要为大家详细介绍了原生js实现对Ajax的封装，模仿jquery，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-26
- 这篇文章主要介绍了js实现对ajax请求面向对象的封装的相关资料,需要的朋友可以参考下...2016-01-12
- 本文主要讲解AngularJS Ajax的知识，这里提供详细资料及代码示例，帮助学习AngularJS的朋友,有需要的小伙伴可以参考下...2016-08-24
- 帝国CMS的三级联动一直是个痛，以前猪先飞网站长有分享过一篇“帝国CMS可自定义数据的三级联动选择功能教程”非常好用，今天再分享一款 三级联动代码，同样可以自定义数据，并且附...2016-01-27
- 这篇文章主要为大家详细介绍了支付宝小程序实现省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-21