javascript - 使用 Javascript 和 HTML 读取和处理 XML

Question

您好，为了学习 XML，我启动了一个小型项目并遵循此教程:https://www.youtube.com/watch?v=ppzYGd0wi_c 。然而，我的 XML 结构与该视频的结构有点不同，例如我为每个部分分配了 id。我已将 XML 粘贴如下:

<?xml version="1.0" encoding=UTF=8?>
    <peopleNetwork>
     <person id="1">
      <name>Alice</name>
      <friend>Ruby</friend>
      <image>images/ruby.jpg</image>
     </person>
     <person id="2">
      <name>Tom</name>
      <friend>Katty</friend>
      <image>images/ketty.jpg</image>
     </person>
    </peopleNetwork>

由于我有 id，而视频中的人没有在他的 XML 中，我是否需要以不同的方式处理我的数据，或者遵循相同的结构？有人可以向我指出一些资源/指导我如何使用 JavaScript 和 HTML 读取和处理包含上述数据的 XML 文件。

我编写了以下代码来提示用户选择文件:

    var input = $(document.createElement('input'));
    input.attr("type", "file");
    input.trigger('click');
    return false;

但我猜还有更多内容，例如保存读取的数据并以某种方式处理它。虽然我在 JavaScript 方面有一些经验，但我从未遇到过读取和处理数据文件的情况 - 因此我发现这真的很困难 - 所以任何关于这方面的指导都会很好。

我知道我需要像视频中的人一样使用 Ajax - 我的问题之一是。在我的数据中，我有 ID，但视频中的人没有，所以我不知道如何处理这个问题。

我是 XML 的新手，但观看视频后我猜它很简单，但我不知道从哪里开始。任何帮助将不胜感激。

Answer 1

您仍然可以使用input type='file'，它允许您从用户的计算机中选择一个文件。然后我们使用 FileReader。

html

<div>Xml File: <input type="file" id="fileInput" accept="text/xml" ></div>
<p id="MyXMLText"></p>

脚本:我在这里使用jquery和javascript。用纯js也可以实现。我们将 onchange 事件附加到 input 上，然后使用 FileReader以文本形式打开并读取 xml。

    $(function () {
    $("#fileInput").on('change', function (e) {
        var file = $("#fileInput")[0].files[0];
        var reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function (e) {
            var fileContent = reader.result;
            //Sorry cannot give you correct answer why xml parsing fails, but this has to be done here.
            fileContent = fileContent.replace('<?xml version="1.0" encoding=UTF=8?>', '').replace(/(?:\r\n|\r|\n)/g, '');
            var xmlDoc = $.parseXML(fileContent); //xml document is ready here
            //Get all the details for person with id = 1
            $("#MyXMLText").append($(xmlDoc).find('person[id="1"]').text() + '<br/>')
            //Get the friend's details only for person with id = 1
            $("#MyXMLText").append($(xmlDoc).find('person[id="1"]>friend').text() + '<br/>')
            //Get the name details only for person with id = 2
            $("#MyXMLText").append($(xmlDoc).find('person[id="2"]>name').text() + '<br/>')
        }
    });
});

parseXML

请告诉我们。