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

实现效果

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

html部分：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>省市区三级联动</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="">请选择省份</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省市区三级联动是一种常见的技术实现，用于实现根据用户选择的省份、城市和区县，动态获取相关数据的功能。下面是一个简单的步骤指导：

创建数据库表结构：