php使用vue实现省市区三级联动
更新时间：2023年12月11日 09:19:18 作者：PHP隔壁老王邻居
这篇文章主要为大家详细介绍了php如何使用vue实现省市区三级联动效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
实现效果
现省市区三级联动的方法可以使用PHP结合AJAX异步请求来实现。下面是一个简单的示例代码：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
<script src="http://9i0i.com/pic.php?p=https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script src="http://9i0i.com/pic.php?p=https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<select v-model="selectedProvince" @change="getCity">
<option value="">请选择省份</option>
<option v-for="province in provinces" :value="province.id">{{ province.name }}</option>
</select>
<select v-model="selectedCity" @change="getDistrict">
<option value="">请选择城市</option>
<option v-for="city in cities" :value="city.id">{{ city.name }}</option>
</select>
<select v-model="selectedDistrict">
<option value="">请选择区域</option>
<option v-for="district in districts" :value="district.id">{{ district.name }}</option>
</select>
</div>
<script>
new Vue({
el: '#app',
data: {
selectedProvince: '',
selectedCity: '',
selectedDistrict: '',
provinces: [],
cities: [],
districts: []
},
mounted() {
this.getProvinces();
},
methods: {
getProvinces() {
axios.get('get_data.php', {
params: {
dataType: 'provinces'
}
})
.then(response => {
this.provinces = response.data;
})
.catch(error => {
console.error(error);
});
},
getCity() {
this.selectedCity = '';
this.selectedDistrict = '';
if (this.selectedProvince !== '') {
axios.get('get_data.php', {
params: {
dataType: 'cities',
provinceId: this.selectedProvince
}
})
.then(response => {
this.cities = response.data;
})
.catch(error => {
console.error(error);
});
} else {
this.cities = [];
this.districts = [];
}
},
getDistrict() {
this.selectedDistrict = '';
if (this.selectedCity !== '') {
axios.get('get_data.php', {
params: {
dataType: 'districts',
cityId: this.selectedCity
}
})
.then(response => {
this.districts = response.data;
})
.catch(error => {
console.error(error);
});
} else {
this.districts = [];
}
}
}
});
</script>
</body>
</html>PHP部分
具体逻辑需要按自己需求写，下面数据只是返回案例
<?php
$dataType = $_GET['dataType'];
if ($dataType === 'provinces') {
// 假设省份数据存储在数据库中
$provinces = array(
array('id' => 1, 'name' => '省份A'),
array('id' => 2, 'name' => '省份B'),
array('id' => 3, 'name' => '省份C')
);
header('Content-Type: application/json');
echo json_encode($provinces);
} elseif ($dataType === 'cities') {
// 假设城市数据存储在数据库中
$provinceId = $_GET['provinceId'];
// 根据省份id查询对应的城市数据
// 这里使用简单的数组代替数据库查询过程
$cities = array();
if ($provinceId == 1) {
$cities = array(
array('id' => 1, 'name' => '城市A1'),
array('id' => 2, 'name' => '城市A2'),
array('id' => 3, 'name' => '城市A3')
);
} elseif ($provinceId == 2) {
$cities = array(
array('id' => 4, 'name' => '城市B1'),
array('id' => 5, 'name' => '城市B2'),
array('id' => 6, 'name' => '城市B3')
);
} elseif ($provinceId == 3) {
$cities = array(
array('id' => 7, 'name' => '城市C1'),
array('id' => 8, 'name' => '城市C2'),
array('id' => 9, 'name' => '城市C3')
);
}
header('Content-Type: application/json');
echo json_encode($cities);
} elseif ($dataType === 'districts') {
// 假设区域数据存储在数据库中
$cityId = $_GET['cityId'];
// 根据城市id查询对应的区域数据
// 这里使用简单的数组代替数据库查询过程
$districts = array();
if ($cityId == 1) {
$districts = array(
array('id' => 1, 'name' => '区域A1'),
array('id' => 2, 'name' => '区域A2'),
array('id' => 3, 'name' => '区域A3')
);
} elseif ($cityId == 2) {
$districts = array(
array('id' => 4, 'name' => '区域B1'),
array('id' => 5, 'name' => '区域B2'),
array('id' => 6, 'name' => '区域B3')
);
} elseif ($cityId == 3) {
$districts = array(
array('id' => 7, 'name' => '区域C1'),
array('id' => 8, 'name' => '区域C2'),
array('id' => 9, 'name' => '区域C3')
);
}
header('Content-Type: application/json');
echo json_encode($districts);
}
?>PHP省市区三级联动是一种常见的技术实现，用于实现根据用户选择的省份、城市和区县，动态获取相关数据的功能。下面是一个简单的步骤指导：
创建数据库表结构：
- 创建一个省份表，包含省份ID和省份名称字段。
- 创建一个城市表，包含城市ID、城市名称和所属省份ID字段。
- 创建一个区县表，包含区县ID、区县名称和所属城市ID字段。
编写前端页面：
- 创建三个下拉框，分别用于展示省份、城市和区县的选项。
- 使用JavaScript监听省份下拉框的变化事件，当选择省份时，发送Ajax请求到后端处理。
- 后端根据省份ID查询对应的城市数据，并将城市数据返回给前端。
- 前端根据返回的城市数据，动态更新城市下拉框的选项。
- 类似地，监听城市下拉框的变化事件，发送Ajax请求获取对应的区县数据，并更新区县下拉框的选项。
编写后端处理逻辑：
- 接收前端发送的Ajax请求，获取请求中的省份ID或城市ID。
- 根据省份ID或城市ID，查询数据库获取对应的数据。
- 将查询到的数据以JSON格式返回给前端。
这只是一个简单的示例，实际的实现可能会更复杂。你可以根据项目需求进行相应的修改和扩展。同时，建议使用合适的安全措施，如输入验证和防止SQL注入等，以保护系统安全。
到此这篇关于php使用vue实现省市区三级联动的文章就介绍到这了,更多相关php vue省市区三级联动内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
有时我们需要控制主页之类的网页过期时间.但我们比如使用的是Chinacache的CDN,那要怎么样设计才能让他缓存我的内容.2008-09-09
本篇文章主要介绍了php获取excel文件数据的方法。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了PHP+JQUERY操作JSON的方法,结合具体实例形式分析了php+jQuery结合ajax实现json格式数据操作的相关技巧,需要的朋友可以参考下2017-03-03
生成excel文件，最简单的莫过于把数据库的数据导入到excel就行了，下面有个不错的示例，大家可以参考下2014-02-02
这篇文章主要介绍了PHP二维数组排序简单实现方法,涉及PHP针对数组的遍历与排序操作常用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了php实现递归抓取网页类,实例分析了php递归操作及网页抓取的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章介绍了php获得当前的脚本网址的方法,通过php服务器变量$_SERVER的简单判断、转换与输出,实现获取当前网址的功能,需要的朋友可以参考一下2007-12-12
php 进阶:实现无限分类...2006-12-12
这篇文章主要介绍了php session的锁和并发，与之相关的现象有请求阻塞、session数据丢失、session数据读不到的问题，感兴趣的小伙伴们可以参考一下2016-01-01
PHP中防止直接访问或查看或下载config.php文件的方法
如何防止下载或访问PHP的配置文件？ 比如服务器里存放着config.php文件，里面有访问数据库的用户名和密码。怎么样防止用户查看该文件？2012-07-07
最新评论