如何使用php和ajax过滤多列mysql数据并在网页上显示

<?php
// 连接到MySQL数据库
$conn = mysqli_connect("localhost", "username", "password", "database");

// 检查连接是否成功
if (!$conn) {
    die("连接失败: " . mysqli_connect_error());
}

// 获取过滤条件的值
$column1_value = $_POST['column1'];
$column2_value = $_POST['column2'];

// 构建查询语句
$sql = "SELECT * FROM table_name WHERE column1 = '$column1_value' AND column2 = '$column2_value'";

// 执行查询
$result = mysqli_query($conn, $sql);

// 将查询结果存储在数组中
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
}

// 将数组转换为JSON格式并返回给Ajax
echo json_encode($data);

// 关闭数据库连接
mysqli_close($conn);
?>

// 使用Ajax发送过滤条件并更新网页内容
function filterData() {
    var column1_value = document.getElementById("column1").value;
    var column2_value = document.getElementById("column2").value;

    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();

    // 设置回调函数
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                // 解析返回的JSON数据
                var data = JSON.parse(xhr.responseText);

                // 更新网页内容
                var resultDiv = document.getElementById("result");
                resultDiv.innerHTML = "";

                for (var i = 0; i < data.length; i++) {
                    var row = data[i];
                    var rowDiv = document.createElement("div");
                    rowDiv.innerHTML = "Column1: " + row.column1 + ", Column2: " + row.column2;
                    resultDiv.appendChild(rowDiv);
                }
            } else {
                console.error("请求失败：" + xhr.status);
            }
        }
    };

    // 发送Ajax请求
    xhr.open("POST", "filter.php", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("column1=" + column1_value + "&column2=" + column2_value);
}