如何获取XML值，然后使用javascript将它们输出到htm文件中

How do I get XML values and then output them into htm files using javascript?

本文关键字：javascript 输出 文件 htm 获取 何获取 XML 然后      更新时间：2023-09-26

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

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

另外，请注意，我既不要求也不希望使用".each"方法或任何循环。我只想单独获取一个节点值，并将其放入一个html元素中，但我希望有一个关于两个文件（xml和javascript）中的内容以及如何打开xml文档的示例。我见过打开xml文档的例子，但它们彼此不同，所以我无法知道哪一个真正有效。

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

好吧，您可以使用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);
    }
});

$（选择器）这是一种jQuery方法，用于定义要放置文本的html块。。。

示例：

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

选择器可以是$（".myClass"）或$（"#myID"）

有关详细信息，请参阅选择器。

我希望这能有所帮助。

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

本质上，您处理的是父标记和子标记。使用XML，您需要提取这些信息，然后可以从中执行任何您喜欢的操作。

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

这里只有几件事需要知道（我的教授教给我的，它们是有用的提示）

  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数据，并通过获得xmlhttp.responseXML 将其存储到xmlDoc中

因此，现在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文件以及它在哪里

相关文章：