如何使用jQuery将XML绑定到div元素（含AJAX调用示例）

嘿，我注意到你想通过AJAX获取XML并原封不动地显示在页面的pre标签里。你的现有代码可能会遇到一个小问题——当你把dataType设为xml时，success回调里的xml参数已经是jQuery解析好的XML DOM对象了，直接append到pre标签里的话，浏览器会把它当成DOM节点渲染，而不是保留原始的XML文本格式。

下面给你两种可行的解决方案：

方法一：直接获取原始XML文本（推荐，仅需显示时） #

如果你的需求只是显示XML原内容，不需要解析它做其他操作，最简单的方式是把dataType改成text，这样AJAX会直接返回原始的XML字符串，然后用text()方法把它插入到pre标签里（用text()而不是append()可以避免特殊字符被当成HTML解析）：

<div class="json-full-output">
  <pre></pre>
</div>

<script>
$.ajax({
  type: "GET",
  url: APIUrl,
  dataType: "text", // 改为text获取原始字符串
  success: function(xmlText) {
    $(".json-full-output pre").text(xmlText);
  },
  // 别忘了添加错误处理，提升用户体验
  error: function(xhr, status, error) {
    $(".json-full-output pre").text("加载XML失败: " + error);
  }
});
</script>

方法二：解析XML后再转成字符串（需操作XML时） #

如果你需要先解析XML进行数据提取等操作，之后再显示原格式内容，可以把解析后的XML DOM对象转换成字符串：

<div class="json-full-output">
  <pre></pre>
</div>

<script>
$.ajax({
  type: "GET",
  url: APIUrl,
  dataType: "xml",
  success: function(xml) {
    // 这里可以先对XML DOM进行操作，比如查找节点
    // const $xml = $(xml);
    // const nodeContent = $xml.find('targetNode').text();

    // 将XML DOM对象序列化为字符串
    const xmlString = new XMLSerializer().serializeToString(xml);
    $(".json-full-output pre").text(xmlString);
  },
  error: function(xhr, status, error) {
    $(".json-full-output pre").text("加载XML失败: " + error);
  }
});
</script>

小提示 #

使用text()方法插入内容是关键，它会自动把XML中的<、>等特殊字符转义成HTML实体，确保这些符号能正确显示，而不会被浏览器解析成HTML标签。

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