php ajax三级联动代码

PHP Ajax三级联动是一种常见的Web开发技术，它通过Ajax的异步请求来实现网页上的三级选择菜单，提供了良好的用户体验和数据交互功能。通过该技术，可以根据前一个选择框的值动态加载下一个选择框的选项，从而实现根据用户选择的层级关系展示相应的数据内容。下面我们将通过一个具体的例子来演示如何使用PHP Ajax实现三级联动。

第一步，我们需要在数据库中创建一个名为"country_city_district"的表，用于存储三级联动的数据信息。该表可以包含三个字段：id、name和parent_id，分别代表每个地区的唯一标识符、名称和父级地区的标识符。例如，我们可以插入以下几条记录作为示例数据：

CREATE TABLE country_city_district(id INT(11) PRIMARY KEY AUTO_INCREMENT,name VARCHAR(50) NOT NULL,parent_id INT(11));
    INSERT INTO country_city_district (name, parent_id) VALUES ("中国", NULL);
    INSERT INTO country_city_district (name, parent_id) VALUES ("北京", 1);
    INSERT INTO country_city_district (name, parent_id) VALUES ("上海", 1);
    INSERT INTO country_city_district (name, parent_id) VALUES ("广东", 1);
    INSERT INTO country_city_district (name, parent_id) VALUES ("广州", 4);
    INSERT INTO country_city_district (name, parent_id) VALUES ("深圳", 4);
    INSERT INTO country_city_district (name, parent_id) VALUES ("天津", 1);
    INSERT INTO country_city_district (name, parent_id) VALUES ("江苏", 1);
    INSERT INTO country_city_district (name, parent_id) VALUES ("南京", 8);
    INSERT INTO country_city_district (name, parent_id) VALUES ("苏州", 8);
    

第二步，我们需要创建一个PHP脚本来处理Ajax请求，并返回对应的数据。首先，在HTML页面中添加一个包含三个选择框的表单，如下所示：

form>
    select id="country" onchange="getCities()">
    option value="">
    请选择国家/option>
    option value="1">
    中国/option>
    /select>
    select id="city" onchange="getDistricts()" disabled>
    option value="">
    请选择城市/option>
    /select>
    select id="district" disabled>
    option value="">
    请选择区域/option>
    /select>
    /form>
    

然后，我们编写相关的JavaScript函数来处理选择框的变化事件，并通过Ajax请求获取对应的数据。具体代码如下：

script>
function getCities() {
    var country_id = document.getElementById("country").value;
if (country_id != "") {
    var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 &
    &
 this.status == 200) {
    document.getElementById("city").innerHTML = this.responseText;
    document.getElementById("city").disabled = false;
    document.getElementById("district").innerHTML = "option value=\"\">
    请选择区域/option>
    ";
    document.getElementById("district").disabled = true;
}
}
    ;
    xhttp.open("GET", "get_cities.php?country_id=" + country_id, true);
    xhttp.send();
}
 else {
    document.getElementById("city").innerHTML = "option value=\"\">
    请选择城市/option>
    ";
    document.getElementById("city").disabled = true;
    document.getElementById("district").innerHTML = "option value=\"\">
    请选择区域/option>
    ";
    document.getElementById("district").disabled = true;
}
}
function getDistricts() {
    var city_id = document.getElementById("city").value;
if (city_id != "") {
    var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 &
    &
 this.status == 200) {
    document.getElementById("district").innerHTML = this.responseText;
    document.getElementById("district").disabled = false;
}
}
    ;
    xhttp.open("GET", "get_districts.php?city_id=" + city_id, true);
    xhttp.send();
}
 else {
    document.getElementById("district").innerHTML = "option value=\"\">
    请选择区域/option>
    ";
    document.getElementById("district").disabled = true;
}
}
    /script>
    

第三步，我们需要创建两个用于处理Ajax请求的PHP脚本。首先，我们创建一个名为"get_cities.php"的脚本，用于根据国家ID获取对应的城市选项，代码如下：

?php// 获取国家ID$country_id = $_GET['country_id'];
    // 连接数据库$servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "your_database_name";
    $conn = new mysqli($servername, $username, $password, $dbname);
    // 查询城市选项$sql = "SELECT * FROM country_city_district WHERE parent_id = $country_id";
    $result = $conn->
    query($sql);
    // 输出城市选项if ($result->
    num_rows >
 0) {
    while($row = $result->
fetch_assoc()) {
    echo "option value=\"" . $row['id'] . "\">
    " . $row['name'] . "/option>
    ";
}
}
 else {
    echo "option value=\"\">
    请选择城市/option>
    ";
}
    // 关闭数据库连接$conn->
    close();
    ?>
    

然后，我们创建一个名为"get_districts.php"的脚本，用于根据城市ID获取对应的区域选项，代码如下：

?php// 获取城市ID$city_id = $_GET['city_id'];
    // 连接数据库$servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "your_database_name";
    $conn = new mysqli($servername, $username, $password, $dbname);
    // 查询区域选项$sql = "SELECT * FROM country_city_district WHERE parent_id = $city_id";
    $result = $conn->
    query($sql);
    // 输出区域选项if ($result->
    num_rows >
 0) {
    while($row = $result->
fetch_assoc()) {
    echo "option value=\"" . $row['id'] . "\">
    " . $row['name'] . "/option>
    ";
}
}
 else {
    echo "option value=\"\">
    请选择区域/option>
    ";
}
    // 关闭数据库连接$conn->
    close();
    ?>
    

通过以上步骤，我们就可以实现一个基本的PHP Ajax三级联动功能。当用户选择国家时，根据国家ID发送Ajax请求获取对应的城市选项；当用户选择城市时，根据城市ID发送Ajax请求获取对应的区域选项。用户可以依次选择国家、城市和区域，从而动态加载对应的数据内容。

总结起来，PHP Ajax三级联动技术在Web开发中具有重要的应用价值。它能够实现数据的动态交互和展示，为用户提供更好的用户体验。通过灵活运用HTML、JavaScript和PHP等技术，我们可以轻松构建出各种类型的三级联动功能，满足用户的不同需求。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！