嘉兴阿里云代理商：ajax下拉框获取数据库数据库数据库数据库

luotuoemo • 2024年3月6日 07:24 • 阿里云 • 阅读 645

要实现ajax 下拉框获取数据库数据，首先需要编写一个后端接口，接收前端传递的值，并根据这个值查询数据库获取数据，最后将数据返回给前端。

编写后端代码：

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

//接收前端传递的值
$keyword = $_GET['keyword'];

//查询数据库获取数据
$sql = "SELECT * FROM table_name WHERE column_name LIKE '%$keyword%'";
$result = mysqli_query($conn, $sql);

$data = array();
while($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
}

//将数据转换为json格式返回给前端
echo json_encode($data);

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

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax 下拉框获取数据库数据</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <select id="selectBox"></select>

    <script>
        $(document).ready(function(){
            $("#selectBox").change(function(){
                var keyword = $(this).val();

                $.ajax({
                    url: "backend.php",
                    type: "GET",
                    data: {keyword: keyword},
                    success: function(data) {
                        var dataObj = JSON.parse(data);
                        for(var i = 0; i < dataObj.length; i++) {
                           $("#selectBox").append("<option value='" + dataObj[i].id + "'>" + dataObj[i].name + "</option>");
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>

在这个例子中，前端使用jQuery发送ajax请求，后端接收前端传递的关键字，根据关键字查询数据库获取数据，将数据返回给前端，并在下拉框中显示。你可以根据实际情况修改后端的SQL语句和返回的数据格式。

首先，在你的数据库中创建一个数据表来存储下拉框需要显示的选项，例如创建一个名为options的表，包含两列：id和name。
使用Ajax来发送请求到服务器端获取数据库中的选项数据。在你的HTML页面中，可以使用如下的代码来实现：

<select id="selectOptions">
<option value="">请选择选项</option>
</select>

<script>
$(document).ready(function(){
    $.ajax({
        url: 'getOptions.php',
        type: 'GET',
        success: function(response){
            var options = JSON.parse(response);
            options.forEach(function(option){
                $('#selectOptions').append('<option value="' + option.id + '">' + option.name + '</option>');
            });
        }
    });
});
</script>

在服务器端创建一个getOptions.php文件，用来处理Ajax请求并返回数据库中的选项数据。在getOptions.php文件中，可以编写如下的代码：

<?php
//连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

//从数据库中获取选项数据
$sql = "SELECT * FROM options";
$result = $conn->query($sql);

$options = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $options[] = ['id' => $row['id'], 'name' => $row['name']];
    }
}

echo json_encode($options);

$conn->close();
?>