为了设计一个图书管理系统的HTML页面，并使用AJAX异步查询书籍ID并展示书籍的详细信息，包括封面图片，我们需要以下几个步骤：
设计HTML页面 编写AJAX请求 处理AJAX响应并更新页面假设我们已有一个名为BookFindServlet的后端服务，它接受POST请求并返回JSON格式的书籍详细信息。
1. 设计HTML页面
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Book Management System</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } #book-details { margin-top: 20px; display: none; } #book-details img { max-width: 200px; display: block; margin-bottom: 10px; } </style> </head> <body> <h1>Book Management System</h1> <label for=”book-id”>Enter Book ID:</label> <input type=”text” id=”book-id” name=”book-id”> <button onclick=”fetchBookDetails()”>Search</button> <div id=”book-details”> <h2>Book Details</h2> <img id=”book-cover” src=”” alt=”Book Cover”> <p><strong>Title:</strong> <span id=”book-title”></span></p> <p><strong>Author:</strong> <span id=”book-author”></span></p> <p><strong>Description:</strong> <span id=”book-description”></span></p> </div> <script> function fetchBookDetails() { const bookId = document.getElementById(‘book-id’).value; const xhr = new XMLHttpRequest(); xhr.open(‘POST’, ‘BookFindServlet’, true); xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { const response = JSON.parse(xhr.responseText); if (response) { document.getElementById(‘book-cover’).src = response.coverImage; document.getElementById(‘book-title’).innerText = response.title; document.getElementById(‘book-author’).innerText = response.author; document.getElementById(‘book-description’).innerText = response.description; document.getElementById(‘book-details’).style.display = ‘block’; } else { alert(‘Book not found’); document.getElementById(‘book-details’).style.display = ‘none’; } } }; xhr.send(‘id=’ + encodeURIComponent(bookId)); } </script> </body> </html>2. 编写AJAX请求
在上面的HTML文件中，fetchBookDetails函数使用XMLHttpRequest来发送AJAX请求。这些步骤详细解释如下：
获取用户输入的书籍ID：从输入框中读取用户输入的书籍ID。 创建并配置XMLHttpRequest对象：使用POST方法向BookFindServlet发送请求，并设置请求头以指示发送的内容类型。 处理响应： 如果请求成功（即状态码为200），解析JSON响应。 更新页面上的元素以显示书籍的详细信息（如封面图片、书名、作者和描述）。3. 处理AJAX响应并更新页面
响应处理部分的JavaScript代码如下：
xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { const response = JSON.parse(xhr.responseText); if (response) { document.getElementById(‘book-cover’).src = response.coverImage; document.getElementById(‘book-title’).innerText = response.title; document.getElementById(‘book-author’).innerText = response.author; document.getElementById(‘book-description’).innerText = response.description; document.getElementById(‘book-details’).style.display = ‘block’; } else { alert(‘Book not found’); document.getElementById(‘book-details’).style.display = ‘none’; } } };总结
通过上述步骤，我们创建了一个简单的图书管理系统HTML页面，使用AJAX向后端服务发送查询请求，并在收到响应后动态更新页面内容。这种方法使用户能够在不刷新页面的情况下查看书籍的详细信息，提高了用户体验和系统的交互性。
