php ajax实现二级联动菜单功能示例;PHP AJAX二级联动菜单示例
使用PHP AJAX实现二级联动菜单功能示例
在网页开发中，二级联动菜单是一个常见的需求。用户在个下拉菜单中选择一个选项后，第二个下拉菜单中的选项会根据个下拉菜单的选择而动态改变。这种功能可以通过PHP和AJAX来实现，下面将介绍如何使用PHP和AJAX来实现二级联动菜单功能。
我们需要创建一个包含省市数据的数据库表。假设我们已经创建了一个名为”locations”的表，其中包含两个字段：id和name，分别用于存储地区的ID和名称。接下来，我们需要编写PHP代码来获取并返回城市数据。
“`php
<?php
// 连接数据库
$servername = “localhost”;
$username = “username”;
$password = “password”;
$dbname = “myDB”;
$conn = new mysqli($servername, $username, $password, $dbname);
// 获取省份对应的城市数据
$province_id = $_GET[‘province_id’];
$sql = “SELECT * FROM locations WHERE province_id = $province_id”;
$result = $conn->query($sql);
// 返回城市数据
$cities = array();
while($row = $result->fetch_assoc()) {
$cities[] = $row;
echo json_encode($cities);
?>
“`
上面的代码连接到数据库，然后根据传入的省份ID获取对应的城市数据，并将数据以JSON格式返回。
接下来，我们需要编写前端页面的代码，使用AJAX来实现二级联动菜单功能。
“`html
function getCity(province_id) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var cities = JSON.parse(this.responseText);
var citySelect = document.getElementById(“city”);
citySelect.innerHTML = “”;
for (var i = 0; i < cities.length; i++) {
var option = document.createElement(“option”);
option.text = cities[i].name;
option.value = cities[i].id;
citySelect.add(option);
}
}
};
xmlhttp.open(“GET”, “get_city.php?province_id=” + province_id, true);
xmlhttp.send();
省份1
省份2
省份3
请选择城市
“`
上面的代码创建了两个下拉菜单，个下拉菜单用于选择省份，当用户选择省份后，会触发getCity函数，该函数使用AJAX向服务器发送请求，获取对应省份的城市数据，并将城市数据动态添加到第二个下拉菜单中。
通过以上代码，我们就实现了一个简单的二级联动菜单功能。用户可以在个下拉菜单中选择省份，第二个下拉菜单中的选项会根据省份的选择动态改变。这种功能可以大大提升用户体验，让用户更方便地选择他们需要的城市信息。
