要实现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();
?>- 在上面的代码中，我们首先连接数据库，并查询options表中的数据，然后将数据以JSON格式返回给前端页面。
通过以上步骤，你就可以实现使用Ajax从数据库中获取数据并动态显示在下拉框中。希望这些信息可以帮助到你。
发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/157435.html
