ajax练习--完成增删改查

以下是使用jQuery和PHP实现简单的AJAX增删改查功能的示例代码。

HTML 部分：

<div id="content"></div>
 
<button id="loadData">加载数据</button>
<button id="addItem">添加项目</button>
<button id="editItem">编辑项目</button>
<button id="deleteItem">删除项目</button>

JavaScript 部分 (使用 jQuery)：

$(document).ready(function() {
    // 加载数据
    $('#loadData').click(function() {
        $.ajax({
            url: 'data.php',
            type: 'GET',
            success: function(data) {
                $('#content').html(data);
            },
            error: function() {
                alert('加载数据失败！');
            }
        });
    });
 
    // 添加项目
    $('#addItem').click(function() {
        // 发送数据到服务器
        $.ajax({
            url: 'action.php',
            type: 'POST',
            data: { action: 'add', item: '新项目' },
            success: function(data) {
                $('#loadData').click(); // 重新加载数据
            },
            error: function() {
                alert('添加失败！');
            }
        });
    });
 
    // 编辑项目
    $('#editItem').click(function() {
        // 发送数据到服务器
        $.ajax({
            url: 'action.php',
            type: 'POST',
            data: { action: 'edit', id: 1, item: '修改后的项目' },
            success: function(data) {
                $('#loadData').click(); // 重新加载数据
            },
            error: function() {
                alert('编辑失败！');
            }
        });
    });
 
    // 删除项目
    $('#deleteItem').click(function() {
        // 发送数据到服务器
        $.ajax({
            url: 'action.php',
            type: 'POST',
            data: { action: 'delete', id: 1 },
            success: function(data) {
                $('#loadData').click(); // 重新加载数据
            },
            error: function() {
                alert('删除失败！');
            }
        });
    });
});

PHP 部分 (data.php 和 action.php)：

// data.php
// 假设有一个数据数组
$data = array('项目1', '项目2', '项目3');
 
// 假设这是从AJAX调用中接收的数据
$action = $_POST['action'];
$id = $_POST['id'];
$item = $_POST['item'];
 
// 处理动作
switch ($action) {
    case 'add':
        // 添加项目的逻辑
        array_push($data, $item);
        break;
    case 'edit':
        // 编辑项目的逻辑
        $data[$id] = $item;
        break;
    case 'delete':
        // 删除项目的逻辑
        unset($data[$id]);
        break;
}
 
// 输出数据到页面
foreach ($data as $item) {
    echo $item . '<br>';
}

这个示例假设你有一个数据源，并且在data.php中提供了