PHP と UniApp を使用してデータの多層連携を実現する方法
はじめに:
Web アプリケーションやモバイル アプリケーションを開発する場合、州などの多層連携を実現する必要があることがよくあります。市区町村選択、品目分類選択などこの記事では、PHP と UniApp を使用してデータの多層連携を実現する方法と、対応するコード例を紹介します。
1. データの準備
作業を始める前に、多階層連携に必要なデータを準備する必要があります。道州と市区町村を3段階で連携させるセレクタを実装したいとすると、道州と市区町村のデータテーブルを用意する必要があります。
県テーブル (県テーブル):
id 名
1 県 1
2 県 2
...
市テーブル (都市テーブル):
id 州 ID 名
1 1 市 1
2 1 市 2
3 2 市 3
4 2 市 4
...
地域テーブル (エリア テーブル) ):
id city_id name
1 1 エリア 1
2 1 エリア 2
3 2 エリア 3
4 2 エリア 4
...
II. PHP 側の実装
ee74f2036fb166873d46563f0ca7ba83exec('set names utf8');
// Get州データ
$provinces = $pdo->query('select * from Provinces')->fetchAll(PDO::FETCH_ASSOC);
// 州に基づいて対応する都市データを取得しますID
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);
}
// 都市に基づいて対応する地域データを取得します ID
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);
}
?>
7ab6b075cc6c7bcbe15d0b9685c6f1da
<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>
3399104e6938bdac11bae5f4688ce7ba
4e07eaec52b67b6abe4024604b22f1f1
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) } } }
fa53fefa8eafc7c836ea46f2cc284f0d
c9ccee2e6ea535a969eb3f532ad9fe89
.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; }
531ac245ce3e4fe3d50054a55f265927
3. 概要
上記の例を通じて、PHP と UniApp を使用してマルチレベルの連携を実現できることがわかります。データの処理は複雑ではありません。 PHP側でのデータ処理とUniApp側でのページ書き込みにより、シンプルで実用的なマルチレベルリンケージセレクターをわずか数行のコードで実装できます。この記事が、多層データ連携のニーズを実現するのに役立つことを願っています。
以上がPHPとUniAppでデータの多層連携を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。