省市区级三级联动查询PHP网站实现

实现省市区级三级联动查询的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开发项目。以上只是简单的实现思路，实际使用中还需要根据具体情况进行适当的修改和优化。