如何操作jQuery Ajax加载的XML对象：增删节点并回传服务器？

一、修复XML节点更新的问题 #

你当前的代码存在两个关键问题：一是大小写错误（myClass.MyData 应为 myClass.myData），二是直接追加解析后的完整XML文档而非目标节点。以下是两种可行的修复方案：

方案1：用jQuery直接创建XML元素（推荐）

这种方式无需手动拼接XML字符串或使用DOMParser，更简洁且能自动处理XML转义：

// 删除指定ID的book节点
myClass.myData.find('book[data-id="' + id + '"]').remove();

// 构建新的book节点
const newBook = $('<book>', {
  'data-id': '3434'
}).append($('<name>').text('just using this as an example, would build with code'));

// 将新节点追加到books容器
myClass.myData.find('books').append(newBook);

方案2：修正DOMParser的使用方式

如果坚持用字符串拼接+解析的方式，需要提取解析后的目标book节点再追加：

myClass.myData.find('book[data-id="' + id + '"]').remove();

const new_xml = '<book data-id="3434"><name>just using this as an example, would build with code</name></book>';
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(new_xml, "text/xml");
// 提取解析后的book元素，而非整个XML文档
const bookNode = xmlDoc.querySelector('book');

// 转换为jQuery对象后追加到books容器
myClass.myData.find('books').append($(bookNode));

二、将更新后的XML回传服务器 #

要把修改后的XML对象保存到服务器，需要先将其序列化为XML字符串，再通过Ajax发送：

// 从jQuery对象中获取原始XML文档
const rawXmlDoc = myClass.myData[0];
// 序列化为XML字符串
const xmlString = new XMLSerializer().serializeToString(rawXmlDoc);

// 发送POST请求保存到服务器
$.ajax({
  type: 'POST',
  url: 'data/save-xml.php', // 替换为你的保存接口地址
  data: { xmlContent: xmlString },
  success: function() {
    console.log('XML文档已成功保存');
  },
  error: function(xhr) {
    console.error('保存失败:', xhr.responseText);
  }
});

注意事项 #

• 确保myClass.myData.find('books')能正确定位到存放book节点的容器，避免因XML结构错误导致追加失败
• 用text()方法设置节点文本内容，可自动处理特殊字符（如<、>）的XML转义，避免破坏XML结构
• 服务器端需对应接收xmlContent参数，完成文件写入或数据库存储逻辑

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