b站黑马JavaScript的Ajax案例代码——图书管理案例搜索事件

好的，以下为B站黑马JavaScript的Ajax案例代码——图书管理案例搜索事件：

/**
 * 搜索事件
 */
function searchBook() {
  // 获取搜索框内容
  var searchInput = document.querySelector("#searchInput");
  var keywords = searchInput.value.trim();

  // 如果搜索框内容为空，提示用户
  if (keywords == "") {
    alert("请输入关键字进行搜索！");
    return;
  }

  // 发送Ajax请求
  var xhr = new XMLHttpRequest(); // 创建XmlHttpRequest对象
  xhr.open("GET", "/api/book/search?keywords=" + keywords, true); // 配置请求
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // 处理响应数据
      var books = JSON.parse(xhr.responseText); // 将响应数据转成JavaScript对象
      renderBooks(books); // 渲染图书列表
    }
  };
  xhr.send(null); // 发送请求
}

/**
 * 渲染图书列表
 * @param {*} books 图书列表数据
 */
function renderBooks(books) {
  // 获取图书列表容器
  var bookList = document.querySelector("#bookList");
  var html = "";

  if (books.length > 0) {
    // 遍历图书列表数据，生成HTML字符串
    for (var i = 0; i < books.length; i++) {
      html += '<tr>';
      html += '<td>' + books[i].title + '</td>';
      html += '<td>' + books[i].author + '</td>';
      html += '<td>' + books[i].category + '</td>';
      html += '<td>' + books[i].price + '</td>';
      html += '<td>' + books[i].publisher + '</td>';
      html += '</tr>';
    }
  } else {
    // 如果没有搜索到任何图书，提示用户
    html = '<tr><td colspan="5">没有搜索到任何图书！</td></tr>';
  }

  // 将生成的HTML字符串添加进图书列表容器
  bookList.innerHTML = html;
}