如何通过浏览器JS读写服务器JSON文件？求fetch+PHP实现方案

好问题！先给你把核心点说清楚：浏览器端JavaScript无法直接读写服务器上的文件系统——这是浏览器安全沙箱机制的限制，所以你想在客户端用类似FileSync的工具直接操作服务器文件是行不通的。不过你提到的用fetch配合后端PHP实现的思路完全正确，下面就给你详细的分步解决方案：

一、核心流程确认 #

你设想的流程完全没问题，具体落地是这样：

• 写入/更新数据：index.html → 用fetch发送POST请求（携带JSON数据）→ save.php → 写入/更新./maindb.json
• 读取数据：index.html → 用fetch发送GET请求 → save.php → 读取./maindb.json并返回给前端

二、后端PHP代码（save.php） #

这个文件负责处理GET（读取）和POST（写入/更新）请求，是连接前端和服务器文件的核心：

<?php
// 定义JSON文件的存储路径
$jsonFile = './maindb.json';

// 处理GET请求：读取并返回JSON数据
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    // 如果文件不存在，先创建默认结构的文件
    if (!file_exists($jsonFile)) {
        $defaultData = ['items' => []];
        file_put_contents($jsonFile, json_encode($defaultData, JSON_PRETTY_PRINT));
    }
    // 设置响应头并输出文件内容
    header('Content-Type: application/json');
    echo file_get_contents($jsonFile);
    exit;
}

// 处理POST请求：写入/更新JSON数据
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取前端发送的JSON数据
    $inputData = json_decode(file_get_contents('php://input'), true);
    if ($inputData === null) {
        http_response_code(400);
        echo json_encode(['error' => 'Invalid JSON data']);
        exit;
    }

    // 两种写入模式可选：
    // 1. 直接覆盖整个文件（适合替换全量数据）
    file_put_contents($jsonFile, json_encode($inputData, JSON_PRETTY_PRINT));

    // 2. 合并现有数据（适合增量更新，注释掉上面的覆盖代码，启用下面的合并逻辑）
    // $existingData = json_decode(file_get_contents($jsonFile), true) ?? ['items' => []];
    // $updatedData = array_merge($existingData, $inputData);
    // file_put_contents($jsonFile, json_encode($updatedData, JSON_PRETTY_PRINT));

    http_response_code(200);
    echo json_encode(['success' => 'Data saved successfully']);
    exit;
}

// 处理其他不支持的请求方法
http_response_code(405);
echo json_encode(['error' => 'Method not allowed']);
?>

三、前端JavaScript代码（结合lowdb） #

把你原来的lowdb逻辑和fetch请求结合，封装读写函数来和后端交互：

// 封装读取服务器JSON数据的函数
async function fetchDbData() {
    try {
        const response = await fetch('save.php', { method: 'GET' });
        if (!response.ok) throw new Error('Failed to fetch data');
        return await response.json();
    } catch (err) {
        console.error('读取数据出错:', err);
        // 读取失败时返回默认结构
        return { items: [] };
    }
}

// 封装保存/更新数据到服务器的函数
async function saveDbData(data) {
    try {
        const response = await fetch('save.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        });
        if (!response.ok) throw new Error('Failed to save data');
        return await response.json();
    } catch (err) {
        console.error('保存数据出错:', err);
        return { error: err.message };
    }
}

// 结合lowdb使用（也可以不用lowdb，直接操作数据）
async function initDb() {
    // 先从服务器获取最新数据
    const serverData = await fetchDbData();
    // 用内存适配器初始化lowdb（持久化交给后端处理）
    const adapter = new lowdb.Memory();
    const db = low(adapter);
    // 用服务器数据初始化lowdb
    db.defaults(serverData).write();

    // 示例：添加一条新数据并同步到服务器
    db.get('items').push({ id: Date.now(), name: 'New Item' }).write();
    // 将更新后的数据同步到服务器
    await saveDbData(db.value());

    return db;
}

// 初始化数据库
initDb();

四、关键注意事项 #

• 文件权限：确保服务器上的./maindb.json文件和所在目录拥有PHP的读写权限（通常设置为755或644，具体根据服务器配置调整）
• 安全防护：如果接口会公开访问，建议添加简单的验证（比如密钥校验），同时对前端传入的数据做合法性校验，避免恶意内容注入
• lowdb适配：这里用lowdb的内存适配器，因为我们主要通过后端持久化数据，lowdb只是用来在前端方便地操作数据结构，操作完成后同步到服务器即可

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