当前位置：首页 > PHP

php ajax实现增删改查

2026-01-28 23:36:44PHP

PHP AJAX 实现增删改查

数据库连接配置

创建 config.php 文件用于数据库连接：

<?php
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'test_db';
$conn = new mysqli($host, $user, $password, $database);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

创建数据（Create）

前端 AJAX 请求：

function createData() {
    let name = document.getElementById('name').value;
    let email = document.getElementById('email').value;

    $.ajax({
        url: 'create.php',
        type: 'POST',
        data: {name: name, email: email},
        success: function(response) {
            alert('Data created successfully');
            fetchData(); // 刷新列表
        }
    });
}

后端 create.php 处理：

<?php
include 'config.php';

$name = $_POST['name'];
$email = $_POST['email'];

$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>

读取数据（Read）

前端 AJAX 请求：

function fetchData() {
    $.ajax({
        url: 'read.php',
        type: 'GET',
        success: function(response) {
            $('#dataTable').html(response);
        }
    });
}

后端 read.php 处理：

<?php
include 'config.php';

$sql = "SELECT * FROM users";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<tr>
                <td>".$row['id']."</td>
                <td>".$row['name']."</td>
                <td>".$row['email']."</td>
                <td>
                    <button onclick='editData(".$row['id'].")'>Edit</button>
                    <button onclick='deleteData(".$row['id'].")'>Delete</button>
                </td>
              </tr>";
    }
} else {
    echo "0 results";
}
$conn->close();
?>

更新数据（Update）

前端 AJAX 请求：

function editData(id) {
    let name = prompt('Enter new name');
    let email = prompt('Enter new email');

    $.ajax({
        url: 'update.php',
        type: 'POST',
        data: {id: id, name: name, email: email},
        success: function(response) {
            alert('Data updated successfully');
            fetchData();
        }
    });
}

后端 update.php 处理：

<?php
include 'config.php';

$id = $_POST['id'];
$name = $_POST['name'];
$email = $_POST['email'];

$sql = "UPDATE users SET name='$name', email='$email' WHERE id=$id";
if ($conn->query($sql) === TRUE) {
    echo "Record updated successfully";
} else {
    echo "Error updating record: " . $conn->error;
}
$conn->close();
?>

删除数据（Delete）

前端 AJAX 请求：

function deleteData(id) {
    if (confirm('Are you sure you want to delete this record?')) {
        $.ajax({
            url: 'delete.php',
            type: 'POST',
            data: {id: id},
            success: function(response) {
                alert('Data deleted successfully');
                fetchData();
            }
        });
    }
}

后端 delete.php 处理：

<?php
include 'config.php';

$id = $_POST['id'];

$sql = "DELETE FROM users WHERE id=$id";
if ($conn->query($sql) === TRUE) {
    echo "Record deleted successfully";
} else {
    echo "Error deleting record: " . $conn->error;
}
$conn->close();
?>

前端页面整合

HTML 示例：

php ajax实现增删改查

<!DOCTYPE html>
<html>
<head>
    <title>AJAX CRUD</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h2>Add New User</h2>
    <input type="text" id="name" placeholder="Name">
    <input type="text" id="email" placeholder="Email">
    <button onclick="createData()">Add</button>

    <h2>User List</h2>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="dataTable"></tbody>
    </table>

    <script>
        $(document).ready(function() {
            fetchData();
        });
    </script>
</body>
</html>