(AJAX)html+css+js+axios实现图书管理
以下是一个简单的使用AJAX技术实现的图书管理界面的代码示例。这个例子展示了如何通过JavaScript发送HTTP请求到服务器,并在得到响应后更新页面上的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图书管理</title>
<style>
#book-list { border-collapse: collapse; width: 100%; }
#book-list td, #book-list th { border: 1px solid #ddd; padding: 8px; }
#book-list tr:nth-child(even) { background-color: #f2f2f2; }
#book-list tr:hover { background-color: #ddd; }
</style>
</head>
<body>
<h2>图书列表</h2>
<table id="book-list">
<thead>
<tr>
<th>ID</th>
<th>书名</th>
<th>作者</th>
<th>操作</th>
</tr>
</thead>
<tbody id="books-body">
<!-- 图书数据将被动态插入到这里 -->
</tbody>
</table>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get('api/books')
.then(response => {
const books = response.data;
let html = '';
books.forEach(book => {
html += `<tr>
<td>${book.id}</td>
<td>${book.title}</td>
<td>${book.author}</td>
<td><button onclick="deleteBook(${book.id})">删除</button></td>
</tr>`;
});
document.getElementById('books-body').innerHTML = html;
})
.catch(error => {
console.error('请求图书数据失败:', error);
});
function deleteBook(bookId) {
axios.delete(`api/books/${bookId}`)
.then(response => {
console.log('删除成功:', response);
location.reload(); // 重新加载页面以查看更新
})
.catch(error => {
console.error('删除失败:', error);
});
}
</script>
</body>
</html>
在这个例子中,我们使用了Axios库来发送HTTP请求。当页面加载完成后,Axios向服务器请求图书数据,然后动态地将数据插入到一个表格中。每本图书旁边都有一个删除按钮,当点击时,会触发deleteBook
函数,该函数再次使用Axios发送一个DELETE请求到服务器,以删除指定的图书。服务器端的API路由需要自己实现,以便能够处理这些请求。
评论已关闭