AJAX（Asynchronous JavaScript and XML）是一種在不重新加載整個頁面的情況下，利用JavaScript對網(wǎng)頁進(jìn)行異步請求和更新的技術(shù)。利用AJAX技術(shù)，我們可以實(shí)現(xiàn)一些動態(tài)效果，例如通過下拉框動態(tài)顯示數(shù)據(jù)庫中的內(nèi)容。本文將介紹如何使用AJAX來實(shí)現(xiàn)下拉框聯(lián)動，并動態(tài)顯示數(shù)據(jù)庫中的數(shù)據(jù)。

假設(shè)我們有一個商品管理系統(tǒng)，其中有兩個下拉框，一個是商品分類下拉框，另一個是對應(yīng)商品的下拉框。當(dāng)用戶選擇一個商品分類后，第二個下拉框會動態(tài)更新為該分類下的所有商品的選項(xiàng)。以電子產(chǎn)品分類為例，當(dāng)用戶選擇了“手機(jī)”這個分類，第二個下拉框會顯示“蘋果手機(jī)”、“華為手機(jī)”、“小米手機(jī)”等選項(xiàng)。

為了實(shí)現(xiàn)這個功能，我們首先需要創(chuàng)建一個數(shù)據(jù)庫，其中包含兩個表格，一個是商品分類表格，另一個是商品表格。商品分類表格包含兩個字段，分別是分類ID和分類名稱。商品表格包含三個字段，分別是商品ID、商品名稱和所屬分類ID?？梢允褂靡韵耂QL語句創(chuàng)建這兩個表格：

CREATE TABLE category (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(50)
);
CREATE TABLE product (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(50),
category_id INT
);

接下來，我們需要創(chuàng)建一個用于顯示下拉框的HTML頁面。頁面中包含兩個下拉框，一個是商品分類下拉框，另一個是商品下拉框。首先，我們需要在頁面中引入jQuery庫和一個用于處理AJAX請求的JavaScript文件：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="ajax.js"></script>

然后，在頁面中添加商品分類下拉框和商品下拉框：

<select id="category">
<option value="">請選擇商品分類</option>
<option value="1">電子產(chǎn)品</option>
<option value="2">家用電器</option>
<option value="3">服裝鞋帽</option>
</select>
<select id="product">
<option value="">請選擇商品</option>
</select>

接下來，我們需要編寫一個JavaScript文件，用于處理AJAX請求和更新商品下拉框的選項(xiàng)。在ajax.js文件中，我們使用jQuery的ajax方法來發(fā)送GET請求，并根據(jù)返回的數(shù)據(jù)動態(tài)更新商品下拉框的選項(xiàng)：

$(document).ready(function() {
$('#category').change(function() {
var categoryId = $(this).val();
$.ajax({
method: 'GET',
url: 'get_products.php',
data: { category_id: categoryId },
success: function(response) {
$('#product').html(response);
}
});
});
});

在get_products.php文件中，我們連接數(shù)據(jù)庫，根據(jù)傳入的分類ID，查詢對應(yīng)分類下的商品，并將結(jié)果返回給ajax.js文件：

<?php
$categoryId = $_GET['category_id'];
// 連接數(shù)據(jù)庫
$pdo = new PDO('mysql:host=localhost;dbname=your_database', 'your_username', 'your_password');
// 查詢對應(yīng)分類下的商品
$stmt = $pdo->prepare('SELECT * FROM product WHERE category_id = :category_id');
$stmt->bindParam(':category_id', $categoryId);
$stmt->execute();
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 根據(jù)查詢結(jié)果生成商品選項(xiàng)
$options = '';
foreach ($products as $product) {
$options .= '<option value="' . $product['id'] . '">' . $product['name'] . '</option>';
}
echo $options;
?>

通過以上代碼，當(dāng)用戶選擇商品分類下拉框中的一個選項(xiàng)后，ajax.js文件會發(fā)送AJAX請求到get_products.php文件，后者會根據(jù)分類ID動態(tài)查詢并生成商品選項(xiàng)，并將結(jié)果返回給前者。ajax.js文件再將結(jié)果更新到商品下拉框中，實(shí)現(xiàn)動態(tài)顯示數(shù)據(jù)庫中的商品。

綜上所述，通過使用AJAX技術(shù)，我們可以實(shí)現(xiàn)下拉框動態(tài)顯示數(shù)據(jù)庫的數(shù)據(jù)。這樣的功能可以提升用戶體驗(yàn)，使用戶能更便捷地選擇所需的商品。