Ajax--初识Ajax--接口和案例 - 图书管理

在这个案例中，我们将使用Ajax来实现一个简单的图书管理系统。我们将创建一个可以添加、删除和获取图书列表的界面。

首先，我们需要一个HTML页面来展示我们的操作界面和结果：




<!DOCTYPE html>
<html>
<head>
    <title>图书管理</title>
</head>
<body>
    <h2>图书列表</h2>
    <ul id="book-list"></ul>
    <h2>添加图书</h2>
    <input type="text" id="book-name" placeholder="图书名称">
    <button id="add-book">添加</button>
 
    <script src="book_manager.js"></script>
</body>
</html>

然后，我们需要一个JavaScript文件来处理Ajax请求和DOM操作：




document.addEventListener('DOMContentLoaded', function() {
    const bookList = document.getElementById('book-list');
    const bookNameInput = document.getElementById('book-name');
    const addBookButton = document.getElementById('add-book');
 
    // 获取图书列表
    fetch('api/books')
        .then(response => response.json())
        .then(books => {
            books.forEach(book => {
                const listItem = document.createElement('li');
                listItem.textContent = book.name;
                bookList.appendChild(listItem);
            });
        });
 
    // 添加图书
    addBookButton.addEventListener('click', function() {
        const bookName = bookNameInput.value;
        fetch('api/books', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name: bookName })
        })
        .then(response => response.json())
        .then(book => {
            const listItem = document.createElement('li');
            listItem.textContent = book.name;
            bookList.appendChild(listItem);
            bookNameInput.value = '';
        });
    });
});

在这个JavaScript代码中，我们使用了Fetch API来发送Ajax请求。当页面加载完成后，我们获取图书列表并将其显示在页面上。同时，我们为添加图书按钮添加了一个点击事件监听器，当按钮被点击时，我们将发送一个POST请求到服务器，并将新图书添加到列表中。

注意，上述代码中的'api/books'是假设的接口地址，你需要将其替换为实际的后端API接口。

这个案例展示了如何使用Ajax进行前后端的数据交互，并在前端更新页面内容。这是现代Web开发中一个非常常见且有用的技术。

Ajax--初识Ajax--接口和案例 - 图书管理

评论已关闭

推荐阅读