如何删除 AJAX XML 响应的外部元素 - 第 2 部分

Posted 2023-05-09

【中文标题】如何删除 AJAX XML 响应的外部元素 - 第 2 部分

【英文标题】：how to remove outer element of AJAX XML Response - Part 2

【发布时间】：2013-04-12 11:54:21

【问题描述】：

好的，这个人已经公平地击败了我。需要帮助，因为我在这个上浪费了几个小时。请看我之前回答过的同样的问题，但现在证明并没有真正做我想做的事 - how to remove outer element of AJAX XML Response

场景：服务器端向客户端浏览器发送 text/xml 响应负载，如下所示：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><tbody><tr data-tt-parent-id="" data-tt-id="12345678" data-tt-branch="false"><td><span class="file">Total</span></td><td>data</td><td>data</td></tr></tbody>

我需要清除 XML 标记标头，剥离 tbody 外部元素，并作为 DOM 兼容的 html 被接受，以插入到 id="tree" 的表的 tbody 中。

为了澄清，我要求：

<tr data-tt-parent-id="" data-tt-id="12345678" data-tt-branch="false"><td><span class="file">Total</span></td><td>data</td><td>data</td></tr> as compliant HTML that will work with .html() or .append() etc

理想情况下，我希望利用 JQuery 解决方案，但现在纯 javascript 仍然可以完成这件事。

这个问题真的让我很头疼。请帮助我了解我在这方面明显出错的地方。我尝试了上一个与同一问题相关的问题给出的各种组合。谢谢大家的帮助。我承认我还不是 jquery 老手。

【问题讨论】：

哪个是外部元素？是tbody

抱歉 Arun，被隐藏了，因为我把它写在了打开的关闭标签中。外部元素是 tbody - 更新的问题。谢谢你的提问。

我需要的是： 总计 数据 数据 作为HTML

【参考方案1】：

试试

$(data).find('tbody').contents();

演示：Plunker

例如：

$.ajax(
    url:'data.xml',
    datatype: 'xml'
).done(function(data)
    $('table').append($(data).find('tbody').contents())
)

【参考方案2】：

好的，这就是我为使其正常工作所做的工作。警告这一点，我真的很喜欢 Arun 提供的解决方案，但出于某种原因（尽管在调试器中一切看起来都很棒），在我的情况下（现代 firefox）它没有正确更新 DOM。所以这是我采取的丑陋方法：

$.ajax(
    async : false, 
    contentType: "text/xml; charset=utf-8",
    url : "/topnodes" 
).done(function(xmlResponse) 
    $strData = xmlToString(xmlResponse);
    $out = $strData.replace('<?xml version="1.0" encoding="UTF-8" standalone="yes"?>', "");
    $out = $out.replace('<tbody>', "");
    $out = $out.replace('</tbody>', "");
    var rows = $($out).filter("tr");
    $('#tree tbody').html(rows);
   // do other stuff...
);

我不得不将这个东西从 XML 世界转换回标准 jquery 世界可以处理的东西，因此使用了方便的 xmlToString() 方法（参见上一篇文章）。然后只需过滤掉 tr 元素并使用 html() 放置在 tbody 中。

Arun 的方法在调用 .html() 之前看起来都很棒，然后只是无法更新 DOM。如下：

$.ajax(
    async : false, 
    contentType: "text/xml; charset=utf-8",
    url : "/topnodes" 
).done(function(xmlResponse) 
   var rows = $(xmlResponse).find('tbody').contents();
   $('#tree tbody').html(rows);
   // do other stuff...
);

Arun - 如果您仍在阅读这篇文章并且知道如何使用上述内容（避免所有这些字符串替换和 xml 到字符串方法调用等，如果您能与我分享这些信息，我会非常感兴趣。谢谢感谢您的宝贵贡献。

我暂时不会将此标记为正确答案，以防有更简洁的方法来获得结果。但如果有人很难找到类似的解决方案，它确实有效。