Comment réaliser une liaison de données à plusieurs niveaux via PHP et UniApp
Introduction :
Lors du développement d'applications Web et d'applications mobiles, nous rencontrons souvent le besoin de réaliser une liaison à plusieurs niveaux, comme la sélection des provinces et des villes, la sélection des catégories de produits, etc. attendez. Cet article expliquera comment utiliser PHP et UniApp pour réaliser une liaison de données à plusieurs niveaux et donnera des exemples de code correspondants.
1. Préparation des données
Avant de commencer, nous devons d'abord préparer les données requises pour la liaison à plusieurs niveaux. Supposons que nous souhaitions mettre en œuvre un sélecteur pour le couplage à trois niveaux des provinces et des municipalités, nous devons préparer un tableau de données pour les provinces et les municipalités.
Tableau des provinces (tableau des provinces) :
id name
1 province 1
2 province 2
...
tableau des villes (tableau des villes) :
id province_id name
1 1 city 1
2 1 city 2
3 2 Ville 3
4 2 Ville 4
...
Tableau des régions (tableau des zones) :
id city_id name
1 1 Zone 1
2 1 Zone 2
3 2 Zone 3
4 2 Zone 4
...
2. Implémentation côté PHP
header('Content-Type: application/json;charset=utf-8');
// Se connecter à la base de données
$pdo = new PDO('mysql:host=localhost;dbname=test ' , 'root', 'password');
$pdo->exec('set names utf8');
// Obtenir les données de la province
$provinces = $pdo->query('select * from provinces' ) ->fetchAll(PDO::FETCH_ASSOC);
// Obtenez les données de la ville correspondantes en fonction de l'ID de la province
if (isset($_GET['province_id'])) {
$provinceId = $_GET['province_id']; $cities = $pdo->query("select * from cities where province_id = $provinceId")->fetchAll(PDO::FETCH_ASSOC); echo json_encode($cities);
}
// Get les données de la ville correspondantes basées sur l'ID de la ville Données régionales correspondantes
if (isset($_GET['city_id'])) {
$cityId = $_GET['city_id']; $areas = $pdo->query("select * from areas where city_id = $cityId")->fetchAll(PDO::FETCH_ASSOC); echo json_encode($areas);
}
?>
<view class="container"> <picker mode="selector" range-key="name" range="{{provinces}}" bind:change="onChangeProvince"> <view class="picker"> {{province}} </view> </picker> <picker mode="selector" range-key="name" range="{{cities}}" bind:change="onChangeCity"> <view class="picker"> {{city}} </view> </picker> <picker mode="selector" range-key="name" range="{{areas}}"> <view class="picker"> {{area}} </view> </picker> </view>
<script></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>export default { data() { return { province: '', // 省份 city: '', // 城市 area: '', // 区域 provinces: [], // 省份数据 cities: [], // 城市数据 areas: [] // 区域数据 } }, mounted() { this.getProvinces() }, methods: { // 获取省份数据 getProvinces() { uni.request({ url: 'http://localhost/getData.php', success: (res) => { this.provinces = res.data } }) }, // 根据省份ID获取对应的城市数据 getCities(provinceId) { uni.request({ url: 'http://localhost/getData.php?province_id=' + provinceId, success: (res) => { this.cities = res.data } }) }, // 根据城市ID获取对应的区域数据 getAreas(cityId) { uni.request({ url: 'http://localhost/getData.php?city_id=' + cityId, success: (res) => { this.areas = res.data } }) }, // 省份选择器变化时的事件 onChangeProvince(event) { const index = event.detail.value this.province = this.provinces[index].name this.city = '' this.area = '' this.getCities(this.provinces[index].id) }, // 城市选择器变化时的事件 onChangeCity(event) { const index = event.detail.value this.city = this.cities[index].name this.area = '' this.getAreas(this.cities[index].id) } } }</pre><div class="contentsignin">Copier après la connexion</div></div><p></script>
.container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .picker { padding: 10px; border: 2px solid #ddd; border-radius: 4px; background-color: #f5f5f5; margin-bottom: 20px; }
3.Résumé
Réussi À partir des exemples ci-dessus, nous pouvons voir qu'il n'est pas compliqué d'utiliser PHP et UniApp pour réaliser une liaison de données à plusieurs niveaux. Grâce au traitement des données côté PHP et à l'écriture de pages côté UniApp, un sélecteur de liens multi-niveaux simple et pratique peut être implémenté avec seulement quelques lignes de code. J'espère que cet article pourra vous être utile pour réaliser vos besoins en matière de liaison de données à plusieurs niveaux.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!