php使用vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
實(shí)現(xiàn)效果
現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)的方法可以使用PHP結(jié)合AJAX異步請(qǐng)求來(lái)實(shí)現(xiàn)。下面是一個(gè)簡(jiǎn)單的示例代碼:
HTML部分:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市區(qū)三級(jí)聯(lián)動(dòng)</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <select v-model="selectedProvince" @change="getCity"> <option value="">請(qǐng)選擇省份</option> <option v-for="province in provinces" :value="province.id">{{ province.name }}</option> </select> <select v-model="selectedCity" @change="getDistrict"> <option value="">請(qǐng)選擇城市</option> <option v-for="city in cities" :value="city.id">{{ city.name }}</option> </select> <select v-model="selectedDistrict"> <option value="">請(qǐng)選擇區(qū)域</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部分
具體邏輯需要按自己需求寫,下面數(shù)據(jù)只是返回案例
<?php $dataType = $_GET['dataType']; if ($dataType === 'provinces') { // 假設(shè)省份數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)中 $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') { // 假設(shè)城市數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)中 $provinceId = $_GET['provinceId']; // 根據(jù)省份id查詢對(duì)應(yīng)的城市數(shù)據(jù) // 這里使用簡(jiǎn)單的數(shù)組代替數(shù)據(jù)庫(kù)查詢過(guò)程 $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') { // 假設(shè)區(qū)域數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)中 $cityId = $_GET['cityId']; // 根據(jù)城市id查詢對(duì)應(yīng)的區(qū)域數(shù)據(jù) // 這里使用簡(jiǎn)單的數(shù)組代替數(shù)據(jù)庫(kù)查詢過(guò)程 $districts = array(); if ($cityId == 1) { $districts = array( array('id' => 1, 'name' => '區(qū)域A1'), array('id' => 2, 'name' => '區(qū)域A2'), array('id' => 3, 'name' => '區(qū)域A3') ); } elseif ($cityId == 2) { $districts = array( array('id' => 4, 'name' => '區(qū)域B1'), array('id' => 5, 'name' => '區(qū)域B2'), array('id' => 6, 'name' => '區(qū)域B3') ); } elseif ($cityId == 3) { $districts = array( array('id' => 7, 'name' => '區(qū)域C1'), array('id' => 8, 'name' => '區(qū)域C2'), array('id' => 9, 'name' => '區(qū)域C3') ); } header('Content-Type: application/json'); echo json_encode($districts); } ?>
PHP省市區(qū)三級(jí)聯(lián)動(dòng)是一種常見(jiàn)的技術(shù)實(shí)現(xiàn),用于實(shí)現(xiàn)根據(jù)用戶選擇的省份、城市和區(qū)縣,動(dòng)態(tài)獲取相關(guān)數(shù)據(jù)的功能。下面是一個(gè)簡(jiǎn)單的步驟指導(dǎo):
創(chuàng)建數(shù)據(jù)庫(kù)表結(jié)構(gòu):
- 創(chuàng)建一個(gè)省份表,包含省份ID和省份名稱字段。
- 創(chuàng)建一個(gè)城市表,包含城市ID、城市名稱和所屬省份ID字段。
- 創(chuàng)建一個(gè)區(qū)縣表,包含區(qū)縣ID、區(qū)縣名稱和所屬城市ID字段。
編寫前端頁(yè)面:
- 創(chuàng)建三個(gè)下拉框,分別用于展示省份、城市和區(qū)縣的選項(xiàng)。
- 使用JavaScript監(jiān)聽(tīng)省份下拉框的變化事件,當(dāng)選擇省份時(shí),發(fā)送Ajax請(qǐng)求到后端處理。
- 后端根據(jù)省份ID查詢對(duì)應(yīng)的城市數(shù)據(jù),并將城市數(shù)據(jù)返回給前端。
- 前端根據(jù)返回的城市數(shù)據(jù),動(dòng)態(tài)更新城市下拉框的選項(xiàng)。
- 類似地,監(jiān)聽(tīng)城市下拉框的變化事件,發(fā)送Ajax請(qǐng)求獲取對(duì)應(yīng)的區(qū)縣數(shù)據(jù),并更新區(qū)縣下拉框的選項(xiàng)。
編寫后端處理邏輯:
- 接收前端發(fā)送的Ajax請(qǐng)求,獲取請(qǐng)求中的省份ID或城市ID。
- 根據(jù)省份ID或城市ID,查詢數(shù)據(jù)庫(kù)獲取對(duì)應(yīng)的數(shù)據(jù)。
- 將查詢到的數(shù)據(jù)以JSON格式返回給前端。
這只是一個(gè)簡(jiǎn)單的示例,實(shí)際的實(shí)現(xiàn)可能會(huì)更復(fù)雜。你可以根據(jù)項(xiàng)目需求進(jìn)行相應(yīng)的修改和擴(kuò)展。同時(shí),建議使用合適的安全措施,如輸入驗(yàn)證和防止SQL注入等,以保護(hù)系統(tǒng)安全。
到此這篇關(guān)于php使用vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)的文章就介紹到這了,更多相關(guān)php vue省市區(qū)三級(jí)聯(lián)動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- php 三級(jí)聯(lián)動(dòng)菜單
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- thinkPHP實(shí)現(xiàn)的省市區(qū)三級(jí)聯(lián)動(dòng)功能示例
- PHP 年月日的三級(jí)聯(lián)動(dòng)實(shí)例代碼
- PHP結(jié)合Vue實(shí)現(xiàn)滾動(dòng)底部加載效果
- PHP+mysql實(shí)現(xiàn)的三級(jí)聯(lián)動(dòng)菜單功能示例
- php和vue配合使用技巧和方法
- php+vue3實(shí)現(xiàn)點(diǎn)選驗(yàn)證碼功能
相關(guān)文章
用PHP讀取flv文件的播放時(shí)間長(zhǎng)度
用PHP讀取flv文件的播放時(shí)間長(zhǎng)度的代碼,需要用的朋友可以參考下。2009-09-09解決wincache不支持64位PHP5.5/5.6的問(wèn)題(提供64位wincache下載)
這篇文章主要解決wincache不支持64位PHP5.5/5.6的問(wèn)題,并提供64位wincache的下載,需要的朋友可以參考下。2016-06-06PHP實(shí)現(xiàn)從PostgreSQL數(shù)據(jù)庫(kù)檢索數(shù)據(jù)分頁(yè)顯示及根據(jù)條件查找數(shù)據(jù)示例
這篇文章主要介紹了PHP實(shí)現(xiàn)從PostgreSQL數(shù)據(jù)庫(kù)檢索數(shù)據(jù)分頁(yè)顯示及根據(jù)條件查找數(shù)據(jù)操作,涉及PHP操作PostgreSQL數(shù)據(jù)庫(kù)的SQL條件查詢、分頁(yè)、顯示等相關(guān)操作技巧,需要的朋友可以參考下2018-06-06php socket實(shí)現(xiàn)的聊天室代碼分享
這篇文章主要介紹了php socket實(shí)現(xiàn)的聊天室代碼分享,本文實(shí)現(xiàn)代碼來(lái)自國(guó)外友人,需要的朋友可以參考下2014-08-08