快捷導(dǎo)航

php使用vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)

更新時(shí)間：2023年12月11日 09:19:18 作者：PHP隔壁老王鄰居

這篇文章主要為大家詳細(xì)介紹了php如何使用vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

實(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: