当前位置：首页 > PHP教程 > php应用 > 列表

php使用vue实现省市区三级联动

发布:smiling　来源: PHP粉丝网 　添加日期：2024-03-09 12:28:10　浏览: 评论：0　

这篇文章主要为大家详细介绍了php如何使用vue实现省市区三级联动效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下。

实现效果

php使用vue实现省市区三级联动

现省市区三级联动的方法可以使用PHP结合AJAX异步请求来实现。下面是一个简单的示例代码：

HTML部分：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>省市区三级联动</title> 
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script> 
  7.     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 
  8. </head> 
  9. <body> 
  10. <div id="app"> 
  11.     <select v-model="selectedProvince" @change="getCity"> 
  12.         <option value="">请选择省份</option> 
  13.         <option v-for="province in provinces" :value="province.id">{{ province.name }}</option> 
  14.     </select> 
  15.    
  16.     <select v-model="selectedCity" @change="getDistrict"> 
  17.         <option value="">请选择城市</option> 
  18.         <option v-for="city in cities" :value="city.id">{{ city.name }}</option> 
  19.     </select> 
  20.    
  21.     <select v-model="selectedDistrict"> 
  22.         <option value="">请选择区域</option> 
  23.         <option v-for="district in districts" :value="district.id">{{ district.name }}</option> 
  24.     </select> 
  25. </div> 
  26.    
  27. <script> 
  28.     new Vue({ 
  29.         el: '#app', 
  30.         data: { 
  31.             selectedProvince: '', 
  32.             selectedCity: '', 
  33.             selectedDistrict: '', 
  34.             provinces: [], 
  35.             cities: [], 
  36.             districts: [] 
  37.         }, 
  38.         mounted() { 
  39.             this.getProvinces(); 
  40.         }, 
  41.         methods: { 
  42.             getProvinces() { 
  43.                 axios.get('get_data.php', { 
  44.                     params: { 
  45.                         dataType: 'provinces' 
  46.                     } 
  47.                 }) 
  48.                     .then(response => { 
  49.                         this.provinces = response.data; 
  50.                     }) 
  51.                     .catch(error => { 
  52.                         console.error(error); 
  53.                     }); 
  54.             }, 
  55.             getCity() { 
  56.                 this.selectedCity = ''; 
  57.                 this.selectedDistrict = ''; 
  58.                 if (this.selectedProvince !== '') { 
  59.                     axios.get('get_data.php', { 
  60.                         params: { 
  61.                             dataType: 'cities', 
  62.                             provinceId: this.selectedProvince 
  63.                         } 
  64.                     }) 
  65.                         .then(response => { 
  66.                             this.cities = response.data; 
  67.                         }) 
  68.                         .catch(error => { 
  69.                             console.error(error); 
  70.                         }); 
  71.                 } else { 
  72.                     this.cities = []; 
  73.                     this.districts = []; 
  74.                 } 
  75.             }, 
  76.             getDistrict() { 
  77.                 this.selectedDistrict = ''; 
  78.                 if (this.selectedCity !== '') { 
  79.                     axios.get('get_data.php', { 
  80.                         params: { 
  81.                             dataType: 'districts', 
  82.                             cityId: this.selectedCity 
  83.                         } 
  84.                     }) 
  85.                         .then(response => { 
  86.                             this.districts = response.data; 
  87.                         }) 
  88.                         .catch(error => { 
  89.                             console.error(error); 
  90.                         }); 
  91.                 } else { 
  92.                     this.districts = []; 
  93.                 } 
  94.             } 
  95.         } 
  96.     }); 
  97. </script> 
  98. </body> 
  99. </html> 

PHP部分

具体逻辑需要按自己需求写，下面数据只是返回案例 

  1. <?php 
  2. $dataType = $_GET['dataType']; 
  3.    
  4. if ($dataType === 'provinces') { 
  5.     // 假设省份数据存储在数据库中 
  6.     $provinces = array( 
  7.         array('id' => 1, 'name' => '省份A'), 
  8.         array('id' => 2, 'name' => '省份B'), 
  9.         array('id' => 3, 'name' => '省份C') 
  10.     ); 
  11.    
  12.     header('Content-Type: application/json'); 
  13.     echo json_encode($provinces); 
  14. } elseif ($dataType === 'cities') { 
  15.     // 假设城市数据存储在数据库中 
  16.     $provinceId = $_GET['provinceId']; 
  17.    
  18.     // 根据省份id查询对应的城市数据 
  19.     // 这里使用简单的数组代替数据库查询过程 
  20.     $cities = array(); 
  21.    
  22.     if ($provinceId == 1) { 
  23.         $cities = array( 
  24.             array('id' => 1, 'name' => '城市A1'), 
  25.             array('id' => 2, 'name' => '城市A2'), 
  26.             array('id' => 3, 'name' => '城市A3') 
  27.         ); 
  28.     } elseif ($provinceId == 2) { 
  29.         $cities = array( 
  30.             array('id' => 4, 'name' => '城市B1'), 
  31.             array('id' => 5, 'name' => '城市B2'), 
  32.             array('id' => 6, 'name' => '城市B3') 
  33.         ); 
  34.     } elseif ($provinceId == 3) { 
  35.         $cities = array( 
  36.             array('id' => 7, 'name' => '城市C1'), 
  37.             array('id' => 8, 'name' => '城市C2'), 
  38.             array('id' => 9, 'name' => '城市C3') 
  39.         ); 
  40.     } 
  41.    
  42.     header('Content-Type: application/json'); 
  43.     echo json_encode($cities); 
  44. } elseif ($dataType === 'districts') { 
  45.     // 假设区域数据存储在数据库中 
  46.     $cityId = $_GET['cityId']; 
  47.    
  48.     // 根据城市id查询对应的区域数据 
  49.     // 这里使用简单的数组代替数据库查询过程 
  50.     $districts = array(); 
  51.    
  52.     if ($cityId == 1) { 
  53.         $districts = array( 
  54.             array('id' => 1, 'name' => '区域A1'), 
  55.             array('id' => 2, 'name' => '区域A2'), 
  56.             array('id' => 3, 'name' => '区域A3') 
  57.         ); 
  58.     } elseif ($cityId == 2) { 
  59.         $districts = array( 
  60.             array('id' => 4, 'name' => '区域B1'), 
  61.             array('id' => 5, 'name' => '区域B2'), 
  62.             array('id' => 6, 'name' => '区域B3') 
  63.         ); 
  64.     } elseif ($cityId == 3) { 
  65.         $districts = array( 
  66.             array('id' => 7, 'name' => '区域C1'), 
  67.             array('id' => 8, 'name' => '区域C2'), 
  68.             array('id' => 9, 'name' => '区域C3') 
  69.         ); 
  70.     } 
  71.    
  72.     header('Content-Type: application/json'); 
  73.     echo json_encode($districts); 
  74. } 
  75. ?> 

PHP省市区三级联动是一种常见的技术实现，用于实现根据用户选择的省份、城市和区县，动态获取相关数据的功能。下面是一个简单的步骤指导：

创建数据库表结构：

创建一个省份表，包含省份ID和省份名称字段。

创建一个城市表，包含城市ID、城市名称和所属省份ID字段。

创建一个区县表，包含区县ID、区县名称和所属城市ID字段。

编写前端页面：

创建三个下拉框，分别用于展示省份、城市和区县的选项。

使用JavaScript监听省份下拉框的变化事件，当选择省份时，发送Ajax请求到后端处理。

后端根据省份ID查询对应的城市数据，并将城市数据返回给前端。

前端根据返回的城市数据，动态更新城市下拉框的选项。

类似地，监听城市下拉框的变化事件，发送Ajax请求获取对应的区县数据，并更新区县下拉框的选项。

编写后端处理逻辑：

接收前端发送的Ajax请求，获取请求中的省份ID或城市ID。

根据省份ID或城市ID，查询数据库获取对应的数据。

将查询到的数据以JSON格式返回给前端。

这只是一个简单的示例，实际的实现可能会更复杂。你可以根据项目需求进行相应的修改和扩展。同时，建议使用合适的安全措施，如输入验证和防止SQL注入等，以保护系统安全。

Tags: php省市区三级联动 vue省市区三级联动

分享到：

推荐文章

热门文章

最新评论文章