如何使用JavaScript修改服务端JSON文件 本地测试不生效问题问询

你当前的两段代码仅实现了从服务端拉取JSON文件、修改浏览器内存中解析得到的JS对象的逻辑，没有将修改后的数据回传给服务端，也没有对应的服务端逻辑处理写入请求，因此修改只会在内存中生效，不会更新实际存储的服务端文件。

1. 前端新增提交修改的请求 #

需要在修改完内存中的JSON对象后，将其序列化为JSON字符串，通过POST请求提交给服务端的处理接口，参考代码如下：

let xmlreq = new XMLHttpRequest()
xmlreq.open("GET","users.json",true)
xmlreq.onload = function() {
  if (xmlreq.status === 200) {
    test(xmlreq.responseText)
  }
}
xmlreq.send()

function test(rawJson) {
  const obj = JSON.parse(rawJson);
  // 修改内存中的对象
  obj.user1.name="john";
  obj.user2.push("item");
  console.log('修改后的对象: ', obj);

  // 提交修改后的数据到服务端
  const updateReq = new XMLHttpRequest();
  // 接口地址对应服务端的写入处理逻辑地址
  updateReq.open("POST", "update_users.php", true);
  updateReq.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  updateReq.onload = function() {
    if (updateReq.status === 200) {
      console.log('文件修改成功', updateReq.responseText);
    }
  }
  updateReq.send(JSON.stringify(obj));
}

2. 服务端新增写入文件的处理逻辑 #

需要在服务端写对应接口接收前端提交的JSON数据，校验后写入到目标JSON文件中。以下以PHP为例，其他后端语言（Node.js、Python等）逻辑一致：
新建update_users.php文件，代码如下：

<?php
// 读取前端提交的JSON数据
$postData = file_get_contents('php://input');
$newJsonData = json_decode($postData, true);
// 校验数据格式合法性
if (json_last_error() !== JSON_ERROR_NONE) {
  http_response_code(400);
  echo '数据格式错误';
  exit;
}
// 写入到users.json文件，需提前给users.json文件配置写入权限
$writeRes = file_put_contents('users.json', json_encode($newJsonData, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT));
if ($writeRes) {
  echo '修改成功';
} else {
  http_response_code(500);
  echo '写入失败，请检查文件权限';
}
?>

注意事项 #

• 本地测试必须启动对应后端服务，不能直接双击打开HTML文件运行，否则请求无法被后端处理。
• 生产环境使用时必须添加权限校验逻辑，避免未授权用户恶意修改服务端文件。

内容的提问来源于stack exchange，提问作者Hüseyin Cuma