
实现省市区级三级联动查询的PHP网站是非常常见的功能,主要用于用户选择省市区,以便精确查询信息,例如商品配送地址、身份证归属地等。
首先,我们需要建立数据库,并创建三个表分别存储省、市、区的数据。省表包含字段:省编号(id)和省名称(name);市表包含字段:市编号(id)、市名称(name)和所属省编号(province_id);区表包含字段:区编号(id)、区名称(name)和所属市编号(city_id)。
接下来,我们通过PHP代码来实现三级联动查询功能。
首先,我们在前端页面中创建三个下拉框,分别对应省、市、区。使用HTML表单元素的select属性,并给每个下拉框一个的id。
```html
```
然后,我们编写JavaScript代码来实现动态加载省市区数据。
```javascript
// 在页面加载完成后执行
window.onload = function() {
// 加载省数据
loadProvince();
// 监听省下拉框的选中事件
document.getElementById('province').addEventListener('change', loadCity);
// 监听市下拉框的选中事件
document.getElementById('city').addEventListener('change', loadDistrict);
}
// 加载省数据
function loadProvince() {
// 发送Ajax请求,获取省数据
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var provinces = JSON.parse(xhr.responseText);
// 将省数据动态加载到省下拉框中
for (var i = 0; i < provinces.length; i++) {
var option = document.createElement('option');
option.value = provinces[i].id;
option.innerHTML = provinces[i].name;
document.getElementById('province').appendChild(option);
}
// 加载市数据
loadCity();
}
};
xhr.open('GET', 'get_province.php', true);
xhr.send();
}
// 加载市数据
function loadCity() {
// 清空市下拉框的选项
document.getElementById('city').innerHTML = '';
// 获取选中的省编号
var provinceId = document.getElementById('province').value;
// 发送Ajax请求,获取市数据
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var cities = JSON.parse(xhr.responseText);
// 将市数据动态加载到市下拉框中
for (var i = 0; i < cities.length; i++) {
var option = document.createElement('option');
option.value = cities[i].id;
option.innerHTML = cities[i].name;
document.getElementById('city').appendChild(option);
}
// 加载区数据
loadDistrict();
}
};
xhr.open('GET', 'get_city.php?province_id=' + provinceId, true);
xhr.send();
}
// 加载区数据
function loadDistrict() {
// 清空区下拉框的选项
document.getElementById('district').innerHTML = '';
// 获取选中的市编号
var cityId = document.getElementById('city').value;
// 发送Ajax请求,获取区数据
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var districts = JSON.parse(xhr.responseText);
// 将区数据动态加载到区下拉框中
for (var i = 0; i < districts.length; i++) {
var option = document.createElement('option');
option.value = districts[i].id;
option.innerHTML = districts[i].name;
document.getElementById('district').appendChild(option);
}
}
};
xhr.open('GET', 'get_district.php?city_id=' + cityId, true);
xhr.send();
}
```
将以上代码保存为一个名为index.html的文件,并在同级目录下创建get_province.php、get_city.php和get_district.php三个PHP文件,用于从数据库中查询省、市、区数据。
get_province.php文件的内容如下:
```php
connect_error) {
die('连接数据库失败:' . $mysqli->connect_error);
}
// 查询省数据
$res = $mysqli->query('SELECT * FROM provinces');
$provinces = array();
while ($row = $res->fetch_assoc()) {
$provinces[] = $row;
}
// 输出JSON格式数据
header('Content-type: application/json');
echo json_encode($provinces);
```
get_city.php文件的内容如下:
```php
connect_error) {
die('连接数据库失败:' . $mysqli->connect_error);
}
// 获取省编号
$provinceId = $_GET['province_id'];
// 查询市数据
$res = $mysqli->query("SELECT * FROM cities WHERE province_id = $provinceId");
$cities = array();
while ($row = $res->fetch_assoc()) {
$cities[] = $row;
}
// 输出JSON格式数据
header('Content-type: application/json');
echo json_encode($cities);
```
get_district.php文件的内容如下:
```php
connect_error) {
die('连接数据库失败:' . $mysqli->connect_error);
}
// 获取市编号
$cityId = $_GET['city_id'];
// 查询区数据
$res = $mysqli->query("SELECT * FROM districts WHERE city_id = $cityId");
$districts = array();
while ($row = $res->fetch_assoc()) {
$districts[] = $row;
}
// 输出JSON格式数据
header('Content-type: application/json');
echo json_encode($districts);
```
以上代码通过Ajax请求从数据库中获取省、市、区数据,并将其动态加载到相应的下拉框中,实现了省市区级三级联动查询功能。
总结来说,实现省市区级三级联动查询的PHP网站,主要需要进行数据库设计、编写前端HTML和JavaScript代码,以及编写PHP代码从数据库中查询数据,通过Ajax将数据返回给前端。整个过程基本上涵盖了前端、后端和数据库的操作,是一个典型的Web开发项目。以上只是简单的实现思路,实际使用中还需要根据具体情况进行适当的修改和优化。