使用 JavaScript 和 AJAX 实现新增数据并刷新页面

在现代 Web 开发中，与服务器进行数据交互是非常常见的任务之一。其中，通过 AJAX（Asynchronous JavaScript and XML）技术向服务器发送请求并处理响应是实现实时数据加载和更新的重要方式之一。本文将介绍如何使用 JavaScript 和 AJAX 来新增数据，并在新增成功后刷新原页面。

1. AJAX 简介

AJAX 是一种在不刷新整个网页的情况下向服务器发送请求和接收响应的技术。它通常使用 XMLHttpRequest 对象或现代的 fetch API 来实现。在这里，我们将使用 XMLHttpRequest 来演示。

2. 创建一个 HTML 表单

首先，我们需要一个用于输入新增数据的 HTML 表单。这里是一个简单的示例：

<form id="addForm">
    <input type="text" id="name" placeholder="姓名">
    <input type="text" id="email" placeholder="邮箱">
    <button type="submit">添加</button>
</form>

3. JavaScript 代码

接下来，我们将编写 JavaScript 代码，以便在表单提交时通过 AJAX 请求将数据发送到服务器。

document.getElementById('addForm').addEventListener('submit', function (e) {
    e.preventDefault(); // 阻止表单默认提交行为

    // 获取表单输入的数据
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;

    // 创建一个 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();

    // 配置请求
    xhr.open('POST', 'add_data.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    // 监听请求状态变化
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 请求成功，刷新页面
            location.reload();
        }
    };

    // 发送请求
    var data = 'name=' + encodeURIComponent(name) + '&email=' + encodeURIComponent(email);
    xhr.send(data);
});

4. 服务器端处理

在服务器端，你需要编写一个用于接收 POST 请求并将数据插入数据库（或进行其他处理）的脚本。这里使用 PHP 作为示例，你可以根据你的服务器端技术进行调整。

<?php
// add_data.php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取 POST 数据
    $name = $_POST['name'];
    $email = $_POST['email'];

    // 在这里执行插入数据库的操作或其他处理

    // 返回成功响应
    http_response_code(200);
    echo '数据添加成功';
} else {
    // 不是 POST 请求，返回错误响应
    http_response_code(400);
    echo '无效的请求';
}
?>