如何使用AJAX/jQuery从网页端修改XML文件中的存储数据

前端浏览器运行的JavaScript本身没有直接修改服务器端文件的权限，你需要搭配后端服务来接收前端提交的数据，再由后端完成XML文件的修改写入

第一步：修改前端代码，新增提交逻辑 #

在你现有JS代码的基础上，新增表单提交监听逻辑，阻止表单默认跳转，将用户输入的信息发送到后端接口：

// 新增表单提交监听
$('form').submit(function(e) {
  // 阻止表单默认跳转刷新
  e.preventDefault();
  // 获取用户输入的玩家信息
  const playerData = {
    name: $('#playerName').val().trim(),
    age: $('#playerAge').val().trim()
  };
  // 非空校验
  if (!playerData.name || !playerData.age) {
    alert('姓名和年龄不能为空');
    return;
  }
  // 发送请求到后端接口
  $.ajax({
    type: 'POST',
    url: 'https://localhost:8848/savePlayer.php', // 此处替换为你自己的后端接口地址
    data: playerData,
    success: function() {
      // 提交成功后清空输入框
      $('#playerName').val('');
      $('#playerAge').val('');
      alert('玩家添加成功');
    },
    error: function(e) {
      alert('添加失败，请重试');
      console.log('提交错误：', e);
    }
  })
})

第二步：编写后端接口，实现XML写入逻辑 #

你可以选用任意后端语言实现，这里以PHP为例，核心逻辑通用：

1. 接收前端传入的姓名、年龄参数
2. 读取现有XML文件内容
3. 插入新的玩家节点到XML结构中
4. 将修改后的XML内容回写覆盖原文件

<?php
// 如需允许手机端跨域访问可以打开下面配置
// header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json; charset=utf-8');

// 接收参数
$name = $_POST['name'] ?? '';
$age = $_POST['age'] ?? '';
if(empty($name) || empty($age)) {
  echo json_encode(['code' => 400, 'msg' => '参数不全']);
  exit;
}

// 加载现有XML文件，路径请替换为你自己的XML文件实际路径
$xmlPath = './lib/data/data.xml';
$xml = simplexml_load_file($xmlPath);
// 新增player节点
$newPlayer = $xml->addChild('player');
$newPlayer->addChild('name', htmlspecialchars($name));
$newPlayer->addChild('age', intval($age));
// 把修改后的内容回写到原文件
$xml->asXML($xmlPath);

echo json_encode(['code' => 200, 'msg' => '添加成功']);
?>

注意事项 #

• 后端服务需要和你现有的静态资源服务同域，或者正确配置跨域规则，否则手机端提交会触发跨域错误
• 请给XML文件及其所在的文件夹配置写入权限，否则后端服务无法修改文件内容
• 如果需要修改已有玩家的数据，逻辑和新增类似，只需要后端根据传入的玩家唯一标识找到对应节点，修改内容后重新保存即可
• 你现有的500毫秒轮询读取逻辑不需要修改，XML文件更新后下一次轮询就会自动同步到主屏幕展示

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