业余程序员福音！Ajax搭建图书管理系统手把手教程！

2023-08-11 16:56:01

利用Ajax打造简单图书管理系统

在前端开发中，Ajax（异步JavaScript和XML）是一个入门级的常用库。它允许网页与服务器进行异步通信，从而实现动态更新，无需刷新整个页面。本文将指导你使用Ajax构建一个简单的图书管理系统，即使你只有基本的HTML、CSS和Ajax知识也能轻松上手。

场景概述

我们想象这样一个场景：你需要创建一个小型图书管理系统，用于管理自己的图书收藏或为朋友和家人创建一个小型图书馆。有了HTML、CSS和Ajax，你就可以创建一个实用且易于管理的系统，满足你的日常使用需求。

构建过程

第一步：准备工作

创建一个新文件夹来存储项目代码。
选择一个文本编辑器来编写代码。
安装一个浏览器来运行代码。

第二步：创建HTML文件

在文件夹中创建一个新的HTML文件，例如index.html，并添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body>
    <h1>图书管理系统</h1>
    <div id="container">
        <form action="/add_book" method="post">
            <label for="book_name">书名：</label>
            <input type="text" name="book_name">
            <br>
            <label for="book_author">作者：</label>
            <input type="text" name="book_author">
            <br>
            <label for="book_price">价格：</label>
            <input type="number" name="book_price">
            <br>
            <input type="submit" value="添加图书">
        </form>
        <br>
        <div id="book_list"></div>
    </div>
    <script src="ajax.js"></script>
</body>
</html>

第三步：创建CSS文件

在文件夹中创建一个新的CSS文件，例如style.css，并添加以下代码：

body {
    font-family: sans-serif;
}
h1 {
    text-align: center;
}
#container {
    width: 600px;
    margin: 0 auto;
}
form {
    margin-bottom: 20px;
}
label {
    display: block;
    margin-bottom: 5px;
}
input[type="text"], input[type="number"] {
    width: 200px;
    padding: 5px;
    margin-bottom: 5px;
}
#book_list {
    border: 1px solid black;
    padding: 10px;
}

第四步：创建Ajax文件

在文件夹中创建一个新的JavaScript文件，例如ajax.js，并添加以下代码：

function addBook(event) {
    event.preventDefault();
    var form = event.target;
    var data = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/add_book", true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            if (data.success) {
                alert("图书添加成功！");
                form.reset();
                getBooks();
            } else {
                alert("图书添加失败！");
            }
        } else {
            alert("请求失败！");
        }
    };
    xhr.send(data);
}

function getBooks() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/get_books", true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            var book_list = document.getElementById("book_list");
            book_list.innerHTML = "";
            for (var i = 0; i < data.length; i++) {
                var book = data[i];
                var li = document.createElement("li");
                li.innerHTML = book.book_name + " - " + book.book_author + " - " + book.book_price;
                book_list.appendChild(li);
            }
        } else {
            alert("请求失败！");
        }
    };
    xhr.send();
}

document.addEventListener("DOMContentLoaded", function() {
    var form = document.getElementById("form");
    form.addEventListener("submit", addBook);
    getBooks();
});