运用JQuery+Ajax依次完成展示所有书籍、根据ID获取书籍、添加书籍等功能

jQuery 和 Ajax 是前端开发中常用的库和技术，它们结合起来可以简化网页与服务器之间的异步数据交互，实现动态加载内容。

1. 展示所有书籍：首先，你需要创建HTML结构来容纳书籍信息，比如一个列表容器 `<ul>`. 使用 jQuery 的 `$.get()` 或 `$.ajax()` 方法向服务器发送请求，获取所有的书籍数据。在回调函数中，解析返回的数据，并利用 `.append()` 方法将每本书的信息追加到列表里：

$.ajax({
    url: 'books.php', // 书籍API地址
    type: 'GET',
    success: function(response) {
        var books = JSON.parse(response); // 假设返回的是JSON格式
        $('#book-list').append(books.map(function(book) { return '<li>' + book.title + '</li>'; }));
    },
    error: function(error) {
        console.error('Failed to load books:', error);
    }
});

2. 根据 ID 获取书籍：当用户点击某本书的链接时，你可以监听这个事件，通过传递的 ID 发送一个新的 AJAX 请求，这次可能是 POST 请求，并携带 ID 参数：

$('a.book-link').click(function(event) {
    event.preventDefault(); // 阻止默认跳转
    var id = $(this).attr('data-id');
    $.ajax({
        url: 'fetch-book.php?id=' + id,
        type: 'GET',
        success: function(book) {
            displayBook(book); // 自定义方法显示单本书
        },
        error: function(error) {
            console.error('Failed to fetch book:', error);
        }
    });
});

function displayBook(bookData) {
    // 在这里处理并显示单本书的内容
}

3. 添加书籍：允许用户填写新书信息后，触发另一个表单提交事件，同样使用 AJAX。在这个过程中，你需要创建一个包含 `POST` 方法的 AJAX 请求，将新书数据作为数据部分（FormData）发送给服务器，服务器响应成功后更新页面：

$('#add-book-form').submit(function(event) {
    event.preventDefault();
    var formData = new FormData(this); // 获取表单数据

    $.ajax({
        url: 'add-book.php',
        type: 'POST',
        data: formData,
        processData: false, // 需要设置processData为false，因为formData已包含了数据序列化
        contentType: false,
        success: function(response) {
            alert('Book added successfully.');
            // 可能需要重新加载书籍列表或者刷新页面
            refreshBooksList();
        },
        error: function(error) {
            console.error('Failed to add book:', error);
        }
    });
});

function refreshBooksList() {
    // 重新获取并展示所有书籍
    $.ajax({ ... });
}