php ajax实现二级联动菜单功能示例;PHP AJAX二级联动菜单示例

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向服务器发送请求，获取对应省份的城市数据，并将城市数据动态添加到第二个下拉菜单中。

通过以上代码，我们就实现了一个简单的二级联动菜单功能。用户可以在个下拉菜单中选择省份，第二个下拉菜单中的选项会根据省份的选择动态改变。这种功能可以大大提升用户体验，让用户更方便地选择他们需要的城市信息。