Ajax是一種強大的前端技術，可以使網頁在不刷新的情況下與服務器進行數據交互。本文將介紹如何使用Ajax獲取圖書的ID，并通過Ajax請求刪除指定的圖書。以一個圖書庫存管理系統為例，我們可以通過Ajax獲取圖書的ID，然后通過發送Ajax請求刪除指定的圖書。通過本文的介紹，你將學會如何利用Ajax技術來進行圖書刪除操作。
首先，我們需要創建一個頁面，用于展示圖書的列表和刪除功能。頁面中的圖書列表將顯示圖書的ID、名稱和作者等信息，以便用戶選擇要刪除的圖書。當用戶點擊刪除按鈕時，我們將調用相應的Ajax函數來刪除選擇的圖書。下面是頁面的基本結構：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>圖書庫存管理系統</h1>
<table id="bookList">
<tr>
<th>ID</th>
<th>圖書名稱</th>
<th>作者</th>
<th>操作</th>
</tr>
</table>
<script>
// 使用Ajax獲取圖書列表
$.ajax({
url: 'getBookList.php',
method: 'GET',
dataType: 'json',
success: function(response) {
// 遍歷圖書列表，將每本圖書添加到頁面中
response.forEach(function(book) {
var row = '<tr>' +
'<td>' + book.id + '</td>' +
'<td>' + book.name + '</td>' +
'<td>' + book.author + '</td>' +
'<td><button onclick="deleteBook(' + book.id + ')">刪除</button></td>' +
'</tr>';
$('#bookList').append(row);
});
}
});
// 使用Ajax刪除圖書
function deleteBook(bookId) {
$.ajax({
url: 'deleteBook.php',
method: 'POST',
data: { id: bookId },
success: function(response) {
// 刪除成功后，從頁面中移除相應的圖書行
$('#bookList').find('tr:contains(' + bookId + ')').remove();
}
});
}
</script>
</body>
</html>上述代碼中，我們使用了jQuery庫來簡化Ajax的操作。首先，我們通過發送GET請求到getBookList.php文件中，獲取圖書的列表數據。獲取到數據后，我們遍歷每本圖書，并根據圖書的ID、名稱、作者和刪除按鈕生成一個表格行，并將其添加到頁面的圖書列表中。每個刪除按鈕都綁定了相應的點擊事件，當用戶點擊刪除按鈕時，將調用deleteBook函數來發送POST請求到deleteBook.php文件中，并傳遞要刪除的圖書ID作為參數。在deleteBook函數的回調函數中，成功刪除圖書后，我們從頁面中移除相應的圖書行。
在服務器端，我們需要處理getBookList.php和deleteBook.php兩個文件。
首先是getBookList.php文件的處理：
<?php
// 獲取圖書列表數據
$bookList = array(
array('id' => 1, 'name' => 'JavaScript高級程序設計', 'author' => 'Nicholas C. Zakas'),
array('id' => 2, 'name' => 'Java編程思想', 'author' => 'Bruce Eckel'),
array('id' => 3, 'name' => 'Python編程從入門到實踐', 'author' => 'Eric Matthes'),
// 更多的圖書數據
);
// 返回圖書列表數據
echo json_encode($bookList);
?>在上述代碼中，我們定義了一個包含多本圖書的數組，并通過json_encode函數將其轉換為JSON格式的字符串輸出。
接下來是deleteBook.php文件的處理：
<?php
// 接收要刪除的圖書ID
$bookId = $_POST['id'];
// 執行刪除操作
// ...
// 返回刪除結果
echo 'success';
?>在上述代碼中，我們首先通過$_POST全局變量獲取前端傳遞過來的要刪除的圖書ID。然后，我們可以根據實際需求執行相應的刪除操作，例如從數據庫中刪除該圖書的記錄。最后，我們通過echo語句返回刪除操作的結果。
通過以上的代碼和說明，我們可以實現通過Ajax獲取圖書的ID，并通過發送Ajax請求刪除指定的圖書的功能。無需刷新頁面，用戶可以方便地刪除所選擇的圖書，提高了操作的便捷性和用戶體驗。當然，除了刪除圖書外，我們還可以利用類似的Ajax技術實現其他的圖書管理功能，如添加圖書、編輯圖書等。希望本文對你理解和運用Ajax技術有所幫助。