0

谁能告诉我或提供一个完整（但简单）的示例，说明如何获取 XML 节点的值并将其绘制（输出）到特定的 HTML 元素中。

我花了几个小时试图查找这个，但对我没有任何用处，或者示例不完整。

另外，请注意，我既不需要也不希望使用“.each”方法或任何循环。我只想单独获取一个节点值并将其放入一个 html 元素中，但是我希望有一个示例，说明两个文件（xml 和 javascript）中的内容，以及如何打开 xml 文档。我已经看到了打开 xml 文档的示例，但是它们彼此不同，因此我无法知道哪个实际有效。

我也对此做了一些测试，但似乎无法让它绘制任何东西。

4

2 回答 2

1

好吧，您可以使用 Ajax 调用来读取文件，并在成功回调中操作从文件接收到的数据...

假设xml是这样的：

<nodeYouWant simpleAttr="JustAnExample">Text inside Node</nodeYouWant>

要获取 XML 节点，您可以使用：

$.ajax({
    type: "GET",
    url: "pathToXML.xml",
    dataType: "xml",
    success: function(data){

        //this gets a node
        var node = data.getElementsByTagName("nodeYouWant");

        //this gets an attribute from the node you just got
        var attr = node.getAttribute("simpleAttr");


       //To put that attr on a html block:
       $(selector).html(attr);

      //or if you want the text content of the node do:
      var nodeText = $(node).text();
      $(selector).html(nodeText);

    }
});

$(selector) 它是一种 jQuery 方式来定义要放置文本的 html 块...

例子：

<div id="myID" class="myClass"></div>

选择器可以是 $(".myClass") 或 $("#myID")

有关更多信息，请参阅选择器。

我希望这会有所帮助。

于 2012-08-23T19:14:55.193 回答
0

您需要了解的主要内容是 DOM 是如何工作的。如果你不知道 DOM 是如何工作的，你可以在这里找到一些信息

本质上，您正在处理父标签和子标签。使用 XML，您需要提取该信息，然后您可以从那里做任何您喜欢的事情。

如果您转到左侧栏，这里有很多关于如何操作 XML DOM 节点的示例和教程

不过，这里只是需要了解的几件事（我的教授教我这个，它们是有用的提示）

  1. 您不能使用 id 或类。相反，您应该使用以下方式获取 XML 节点

    var elements = node.getElementsByTagName("tagname");

  2. 您不能使用 innerHTML 来获取节点内的文本。您可以使用 HTML，但不能使用 XML。为此，您必须使用

    var text = node.firstChild.nodeValue;

  3. 你不能.attributeName用来获取属性。你需要使用

    var attrValue = node.getAttribute("attrName");

希望这可以帮助。如果你还在苦苦挣扎，请问。

好吧，我一直在尝试使用 w3schools 上的示例，我希望这会有所帮助。如果它不只是问：

转到此示例

我将尝试演练这个示例，但您应该对正在发生的事情有一个大致的了解。他们有一个名为cd_catalog.xml的 XML 文件，其中包含他们需要的所有信息。当他们按下按钮时，它只是以 HTML 格式显示所有信息。如果您查看之前和之后的 HTML 代码，您会发现myDiv在 xml 文件中填充了所有艺术家。

现在让我们看一下代码。

function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;
    }
  }
xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
}

需要指出的一些关键事项。一步一步他们有一个功能，所以当文档完全加载并且代码已经发送（这由检查xmlhttp.status==200）他将从 cd_catalog.xml 中提取所有 xml 数据并xmlDoc通过获取将其存储到xmlhttp.responseXML

因此，现在xmlDoc将 cd_catalog.xml 中的所有信息存储在一个方便的变量中。从那里，他用来xmlDoc.getElementsByTagName("ARTIST");获取 xml 文件中所有艺术家的数组，仅此而已。他将这个数组命名为 x。

现在他遍历这个称为 x 的巨大数组，对于每个索引i（表示为 x[i]），他得到了childNodes，它返回一个数组，里面只有一个东西（文本），这就是为什么他引用childNodes[0]索引并且他得到它的.nodeValue。因此，现在他将最初存储在 xml 文件中的文本保存在一个名为的变量中txt，他只需添加一个</br>标签和他想要的任何其他 HTML 并将其放入，document.getElementById("myDiv").innerHTML以便将其翻译成 HTML 格式。对 xml 文件中的每个 ARTIST 标记重复此过程。

我希望这有帮助。如果您仍然感到困惑，请告诉我们。这确实需要您知道您正在处理的 xml 文件及其位置。

于 2012-08-23T19:17:51.550 回答