通过 ajax 调用在 XML 文件中输出注释

Question

如何将 .xml 文件中的注释内容输出到我的文本区域？

我的 .html：

<textarea name="comment" id="comment" rows="3"/>

我的 .xml：

<div>
<ab type="transcription"><!--This is a comment--></ab>
</div>

我的 .js：

$.ajax({
type: "GET",
url: "../data/cards/1799.xml",
dataType: "xml",
cache: false,
success: function (xml) {
[...]
var mycomment = $(xml).find("ab").attr("type", "transcription");
$("comment").val(mycomment)

.text() 不输出任何内容。提前感谢您对正确方向的任何提示！

Answer 1

您的 HTML 元素是 <textarea>，而不是 <comment>，因此 $('comment').val 将不起作用。另外，要获取评论的文本，您应该使用

$(xml).find('ab').text()

only - 使用.attr 设置或获取节点的属性，您并不关心。所以，试试：

const text = $(xml).find('ab').text();
$("#comment").val(text);

前面的# 表示您要查找具有该id 的元素。 （不带任何符号，表示您要查找具有该标签名称的元素。）

在您的 XML 中，如果您想识别类型为 transcription 的 ab，您可以使用查询字符串：

ab[type="transcription"]

另一个问题是text（或textContent）不能识别评论节点——但是，如果<ab>的内容只是那个评论，那么你可以使用.html或.innerHTML检索它。

另外请注意，没有必要为此包含像 jQuery 这样的大型库 - 您可以在 vanilla Javascript 中轻松实现它：

fetch(<url>)
  .then(res => res.text())
  .then((text) => {
    const doc = new DOMParser().parseFromString(text, 'text/html');
    const text = doc.querySelector('ab').innerHTML;
    document.querySelector('#comment').value = text;
  });

演示：

const responseText = `<div>
<ab type="transcription"><!` + `--This is a comment--></ab>
</div>`;

const doc = new DOMParser().parseFromString(responseText, 'text/html');
const text = doc.querySelector('ab').innerHTML;
document.querySelector('#comment').value = text;

<textarea id="comment"></textarea>

要访问评论节点的内容，可以使用childNodes[0]导航到该节点，然后获取其textContent：

const responseText = `<div>
<ab type="transcription"><!` + `--This is a comment--></ab>
</div>`;

const doc = new DOMParser().parseFromString(responseText, 'text/html');
const text = doc.querySelector('ab').childNodes[0].textContent;
document.querySelector('#comment').value = text;

<textarea id="comment"></textarea>