AJAX——图书管理案例

以下是一个简化的AJAX实现图书管理的例子。假设我们有一个简单的图书列表和一个表单用于添加新图书，我们将使用jQuery来处理AJAX请求。

HTML部分：

<div id="book-list">
  <!-- 图书列表将被动态加载和显示在这里 -->
</div>
 
<form id="add-book-form">
  <input type="text" name="title" placeholder="图书名称">
  <input type="text" name="author" placeholder="作者名称">
  <button type="submit">添加图书</button>
</form>

JavaScript部分（使用jQuery）：

$(document).ready(function() {
  // 加载图书列表
  loadBooks();
 
  // 表单提交事件
  $('#add-book-form').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    var title = $(this).find('input[name="title"]').val();
    var author = $(this).find('input[name="author"]').val();
    addBook(title, author); // 添加图书
    $(this).find('input[type="text"]').val(''); // 清空输入字段
  });
  
  // 定义加载图书的函数
  function loadBooks() {
    $.ajax({
      url: 'get_books.php', // 服务器端的URL
      type: 'GET',
      dataType: 'json',
      success: function(books) {
        var list = $('#book-list');
        list.empty(); // 清空列表
        $.each(books, function(index, book) {
          list.append('<div>' + book.title + ' by ' + book.author + '</div>');
        });
      },
      error: function() {
        alert('Error loading books');
      }
    });
  }
 
  // 定义添加图书的函数
  function addBook(title, author) {
    $.ajax({
      url: 'add_book.php',
      type: 'POST',
      data: { title: title, author: author },
      dataType: 'json',
      success: function(response) {
        if (response.status === 'success') {
          loadBooks(); // 加载图书列表以更新视图
        } else {
          alert('Error adding book');
        }
      },
      error: function() {
        alert('Error adding book');
      }
    });
  }
});

在这个例子中，我们使用jQuery的$.ajax()方法来处理AJAX请求。loadBooks()函数获取所有图书，并将它们添加到页面上的列表中。addBook()函数通过POST请求添加一本新图书，并在成功后重新加载图书列表。这里假设有get_books.php和add_book.php两个服务器端脚本用于处理请求。