如何通过HTTP请求与PHP删除JSON文件指定值？附排障场景

1. HTML & JavaScript 文件（示例：index.html） #

这里我们创建一个按钮，点击时触发删除逻辑，固定目标值为'two'，通过fetch发送POST请求到PHP接口，同时处理请求结果：

<!DOCTYPE html>
<html>
<head>
    <title>删除JSON元素</title>
</head>
<body>
    <button id="deleteTwoBtn">删除'two'</button>

    <script>
        document.getElementById('deleteTwoBtn').addEventListener('click', async () => {
            const targetValue = 'two'; // 设定要删除的目标值

            try {
                const response = await fetch('update.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `target=${encodeURIComponent(targetValue)}`
                });

                const result = await response.json();
                if (result.success) {
                    alert(`已成功删除 "${targetValue}"`);
                    // 可选：刷新页面或重新拉取最新JSON数据更新前端展示
                } else {
                    alert(`删除失败：${result.message || '未知错误'}`);
                }
            } catch (error) {
                console.error('请求出错:', error);
                alert('请求失败，请检查服务器状态');
            }
        });
    </script>
</body>
</html>

2. PHP 处理文件（update.php） #

这个文件负责接收前端请求，读取JSON文件、过滤目标值、重新写入文件，同时处理各种异常情况：

<?php
header('Content-Type: application/json');

// 仅允许POST请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    echo json_encode(['success' => false, 'message' => '仅支持POST请求']);
    exit;
}

// 校验请求参数
if (!isset($_POST['target'])) {
    echo json_encode(['success' => false, 'message' => '缺少目标删除值']);
    exit;
}

$target = $_POST['target'];
$jsonPath = 'codes.json';

// 检查JSON文件是否存在
if (!file_exists($jsonPath)) {
    echo json_encode(['success' => false, 'message' => 'JSON文件不存在']);
    exit;
}

// 读取并解析JSON内容
$jsonContent = file_get_contents($jsonPath);
$codes = json_decode($jsonContent, true);

// 校验JSON解析是否成功
if (json_last_error() !== JSON_ERROR_NONE) {
    echo json_encode(['success' => false, 'message' => 'JSON文件格式错误']);
    exit;
}

// 过滤掉目标值
$filteredCodes = array_filter($codes, function($item) use ($target) {
    return $item !== $target;
});

// 重新索引数组（避免过滤后出现非连续索引，导致JSON转为对象）
$filteredCodes = array_values($filteredCodes);

// 写入更新后的JSON内容
if (file_put_contents($jsonPath, json_encode($filteredCodes, JSON_PRETTY_PRINT)) === false) {
    echo json_encode(['success' => false, 'message' => '写入文件失败，请检查文件权限']);
    exit;
}

echo json_encode(['success' => true, 'message' => '删除成功']);
?>

3. 初始 codes.json 文件 #

["one", "two", "three"]

解决「点击按钮后值仍存在」的常见问题 #

如果执行删除操作后'two'依然存在，大概率是以下原因：

• 文件权限不足：服务器对codes.json没有写入权限。可以通过服务器命令调整权限，比如chmod 644 codes.json（根据服务器配置调整合适的权限）。
• JSON解析失败：如果codes.json格式有误（比如末尾多了逗号、引号不匹配），json_decode会失败，导致删除逻辑未执行。可以通过json_last_error()排查具体错误。
• 请求路径错误：前端fetch的update.php路径不正确（比如不在同一目录），导致请求未到达处理脚本。可以打开浏览器控制台的「网络」面板，查看请求状态和响应内容。
• 数组索引未重置：如果没有用array_values()重新索引，过滤后的数组会保留原索引，写入JSON后会变成对象格式，但目标值其实已经被删除，只是格式不符合预期。
• 缓存问题：浏览器或服务器缓存了旧的JSON内容。可以在请求时添加时间戳参数（比如fetch('update.php?t='+Date.now())），或在PHP中添加禁止缓存的响应头。

内容的提问来源于stack exchange，提问作者claOnline