实现无刷新的省市县三级联动可以使用 Ajax 技术，通过前端 JavaScript 发送异步请求，从后端获取数据并动态更新页面内容。以下是一个简单的例子，假设你已经有一个包含省市县数据的数据库。
数据库表结构
假设有三个表：provinces、cities、counties 分别存储省、市、县的数据。
CREATE TABLE provinces (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(255) NOT NULL
);
CREATE TABLE cities (
id INT PRIMARY KEY AUTO_INCREMENT,
province_id INT NOT NULL,
name VARCHAR(255) NOT NULL,
FOREIGN KEY (province_id) REFERENCES provinces(id)
);
CREATE TABLE counties (
id INT PRIMARY KEY AUTO_INCREMENT,
city_id INT NOT NULL,
name VARCHAR(255) NOT NULL,
FOREIGN KEY (city_id) REFERENCES cities(id)
);
HTML 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>省市县三级联动</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<label for="province">省：</label>
<select id="province" name="province" onchange="getCities()">
<!-- 省份选项将通过Ajax填充 -->
</select>
<label for="city">市：</label>
<select id="city" name="city" onchange="getCounties()">
<!-- 城市选项将通过Ajax填充 -->
</select>
<label for="county">县：</label>
<select id="county" name="county">
<!-- 县选项将通过Ajax填充 -->
</select>
<script>
$(document).ready(function() {
getProvinces(); // 页面加载时获取省份列表
});
function getProvinces() {
$.ajax({
url: 'get_data.php',
type: 'POST',
data: { action: 'get_provinces' },
success: function(response) {
$('#province').html(response);
}
});
}
function getCities() {
var provinceId = $('#province').val();
$.ajax({
url: 'get_data.php',
type: 'POST',
data: { action: 'get_cities', province_id: provinceId },
success: function(response) {
$('#city').html(response);
}
});
}
function getCounties() {
var cityId = $('#city').val();
$.ajax({
url: 'get_data.php',
type: 'POST',
data: { action: 'get_counties', city_id: cityId },
success: function(response) {
$('#county').html(response);
}
});
}
</script>
</body>
</html>
数据库配置（config.php）
<?php
// 数据库连接配置
define('DB_HOST', 'your_db_host');
define('DB_USER', 'your_db_user');
define('DB_PASS', 'your_db_password');
define('DB_NAME', 'your_db_name');
// 创建数据库连接
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
// 检查连接是否成功
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
获取省份、城市、县数据的 PHP 脚本（get_data.php）
<?php
include 'config.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$action = $_POST['action'];
if ($action === 'get_provinces') {
$provinces = getProvinces();
echo generateOptions($provinces);
} elseif ($action === 'get_cities') {
$provinceId = $_POST['province_id'];
$cities = getCities($provinceId);
echo generateOptions($cities);
} elseif ($action === 'get_counties') {
$cityId = $_POST['city_id'];
$counties = getCounties($cityId);
echo generateOptions($counties);
}
}
function getProvinces() {
global $conn;
$sql = "SELECT * FROM provinces";
$result = $conn->query($sql);
$provinces = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$provinces[] = $row;
}
}
return $provinces;
}
function getCities($provinceId) {
global $conn;
$sql = "SELECT * FROM cities WHERE province_id = $provinceId";
$result = $conn->query($sql);
$cities = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$cities[] = $row;
}
}
return $cities;
}
function getCounties($cityId) {
global $conn;
$sql = "SELECT * FROM counties WHERE city_id = $cityId";
$result = $conn->query($sql);
$counties = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$counties[] = $row;
}
}
return $counties;
}
function generateOptions($data) {
$options = '';
foreach ($data as $item) {
$options .= '<option value="' . $item['id'] . '">' . $item['name'] . '</option>';
}
return $options;
}
上述代码中，通过 Ajax 发送请求到 get_data.php，get_data.php 根据请求的动作（action）获取相应的省市县数据并返回 HTML 选项，然后在前端使用 JavaScript 更新对应的 <select> 元素。替换上述代码中的数据库连接配置信息，并根据实际的数据库表结构进行调整。
本站原创内容，如需转载请注明来源：https://www.liutonghui.com/136.html
评论列表（0条）
暂时没有评论！