在Web開發中，省級連動是非常常見的功能之一。例如，在一個地址填寫表單中，使用者需要先選擇自己所在的省份，然後再根據所選省份的城市資料進行選擇。這種功能的實現主要依賴於前端技術和後端技術之間的協同配合。在本篇文章中，我們將介紹如何使用PHP和AJAX技術來實現省級連動功能。
- 準備工作
在使用PHP和AJAX實作省級連動之前，我們需要準備一些必要的工作。首先，我們需要一個城市資料庫。這個資料庫包含了所有的省份、城市和縣區的資料。這個資料庫可以是MySQL、Oracle、MSSQL Server等。在本篇文章中，我們使用的是MySQL資料庫。
除此之外，我們還需要一些前端技術，例如HTML、CSS、和Javascript。這些技術可以幫助我們建立互動性強的使用者介面。在這個使用者介面中，使用者可以透過下拉式選單選擇自己所在的省份和城市。
- 建立城市資料庫
在創建城市資料庫之前，我們需要設計這個資料庫的資料結構。主要包含如下的資料表：
- 省份表(province): 包含省份id和省份名稱欄位；
- 城市表(city)：包含城市id、城市名稱和省份id欄位；
- 縣區表(area)：包含縣區id、縣區名稱和城市id欄位。
使用以下的SQL語句建立表格：
#-- 省表
CREATE TABLE province (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ;
-- 城市表
CREATE TABLE city (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
province_id int(11) NOT NULL,
PRIMARY KEY (id),
KEY province_id (province_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- 縣區表
CREATE TABLE area (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
city_id int(11) NOT NULL,
PRIMARY KEY (id),
KEY city_id (city_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
##把城市資料匯入到這三個表格中，我們就可以開始建立PHP程式碼了。
- #建立省級連動程式碼
以下是PHP程式碼實現的流程：
- 當使用者選擇了一個省份（透過下拉式選單方式），AJAX代碼將所選的省份id發送到後端伺服器；
- 後端伺服器接收到省份id後，查詢資料庫傳回該省份所屬的城市清單；
- AJAX代碼將城市清單更新到前端頁面上，讓使用者可以繼續選擇城市。
依照上述流程，我們可以寫如下的PHP程式碼：
<?php
// 获取所有省份信息
$conn = mysqli_connect("localhost", "root", "password", "test");
$sql = "SELECT id, name FROM province ORDER BY id ASC";
$result = mysqli_query($conn, $sql);
$provinceArray = array();
while ($row = mysqli_fetch_assoc($result)) {
array_push($provinceArray, $row);
}
mysqli_close($conn);
// 输出省份信息
echo json_encode($provinceArray, JSON_UNESCAPED_UNICODE);
?>登入後複製
<?php
// 获取所选省份对应的城市信息
$provinceId = $_GET['provinceId'];
$conn = mysqli_connect("localhost", "root", "password", "test");
$sql = "SELECT id, name FROM city WHERE province_id=$provinceId ORDER BY id ASC";
$result = mysqli_query($conn, $sql);
$cityArray = array();
while ($row = mysqli_fetch_assoc($result)) {
array_push($cityArray, $row);
}
mysqli_close($conn);
// 输出城市信息
echo json_encode($cityArray, JSON_UNESCAPED_UNICODE);
?>登入後複製
<?php
// 获取所选城市对应的县区信息
$cityId = $_GET['cityId'];
$conn = mysqli_connect("localhost", "root", "password", "test");
$sql = "SELECT id, name FROM area WHERE city_id=$cityId ORDER BY id ASC";
$result = mysqli_query($conn, $sql);
$areaArray = array();
while ($row = mysqli_fetch_assoc($result)) {
array_push($areaArray, $row);
}
mysqli_close($conn);
// 输出县区信息
echo json_encode($areaArray, JSON_UNESCAPED_UNICODE);
?>登入後複製
這裡我們使用了mysqli連接資料庫，使用前需要將上述程式碼中的"localhost"、"root"和" password"替換成對應的主機名稱、使用者名稱和密碼。同時，我們也需要將資料庫名稱測試成對應的資料庫。
- 建立前端介面
在建構前端介面中，我們主要需要使用HTML、CSS和Javascript技術。以下是省級連結在前端實現的主要步驟：
- 定義兩個下拉式選單：一個用於選擇省份，另一個用於選擇城市；
- 當使用者選擇了一個省份之後，向後端伺服器發送請求獲取該省份對應的城市列表；
- 更新城市下拉列表，讓用戶可以繼續選擇城市。
以下是實作的HTML和Javascript程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省级联动</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<select id="provinceSelect">
<option value="">请选择省份</option>
</select>
<select id="citySelect">
<option value="">请选择城市</option>
</select>
<select id="areaSelect">
<option value="">请选择县区</option>
</select>
<script>
$(document).ready(function () {
// 页面加载时获取所有省份信息
$.ajax({
url: 'province.php',
type: 'GET',
dataType: 'json',
success: function (data) {
// 循环添加省份列表
$.each(data, function (i, item) {
$('#provinceSelect').append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
});
// 当用户选择省份时获取该省份对应的城市信息
$('#provinceSelect').change(function () {
// 获取所选省份的id
var provinceId = $(this).val();
// 清空城市列表和县区列表
$('#citySelect').empty().append('<option value="">请选择城市</option>');
$('#areaSelect').empty().append('<option value="">请选择县区</option>');
// 如果没有选择省份，则不处理
if (provinceId === '') {
return false;
}
// 发送AJAX请求获取所选省份对应的城市列表
$.ajax({
url: 'city.php',
type: 'GET',
dataType: 'json',
data: { provinceId: provinceId },
success: function (data) {
// 循环添加城市列表
$.each(data, function (i, item) {
$('#citySelect').append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
});
});
// 当用户选择城市时获取该城市对应的县区信息
$('#citySelect').change(function () {
// 获取所选城市的id
var cityId = $(this).val();
// 清空县区列表
$('#areaSelect').empty().append('<option value="">请选择县区</option>');
// 如果没有选择城市，则不处理
if (cityId === '') {
return false;
}
// 发送AJAX请求获取所选城市对应的县区列表
$.ajax({
url: 'area.php',
type: 'GET',
dataType: 'json',
data: { cityId: cityId },
success: function (data) {
// 循环添加县区列表
$.each(data, function (i, item) {
$('#areaSelect').append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
});
});
});
</script>
</body>
</html>登入後複製
在頁面運行後，使用者就可以透過下拉式清單選擇自己的省份和城市了。當使用者選擇了省份之後，會自動發送AJAX請求以取得城市清單；當使用者選擇了城市之後，會自動發送AJAX請求以取得縣區清單。一切都在無須任何頁面跳轉的情況下完成，使用者體驗性非常好。
至此，我們已經成功實現了PHP和AJAX實現省級連動的功能。同時也感受到了前後端技術的密切協同，為使用者帶來更好的使用體驗。
以上是php怎麼用ajax實現省級聯動的詳細內容。更多資訊請關注PHP中文網其他相關文章！
