使用Javascript和HTML读取和处理XML

大家好，为了学习XML，我启动了一个小型项目，并遵循以下步骤：。但是，我的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>

但我猜还有更多，例如保存读取的数据并以某种方式进行处理。虽然我在JavaScript方面有一些经验，但我从未遇到过读取和处理数据文件的问题——因此我发现这是一个非常困难的问题——所以任何关于这方面的指导都是很好的

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

---

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

您仍然可以使用

input type='file'

从用户计算机上选择文件。然后我们使用FileReader

html

---

让我们知道。

您仍然可以使用

input type='file'

从用户计算机中选择文件。然后我们使用FileReader

html

---

让我们知道。

请阅读。关键短语：“搜索、研究”和“解释……任何阻碍您自己解决的困难”。您是否正在尝试读取/解析用户在浏览器中选择的xml文件？@搜索是。请阅读。关键短语：“搜索、研究”和“解释……任何阻碍您自己解决的困难”。您是否正在尝试读取/解析用户在浏览器中选择的xml文件？@Search yes.Hi，有没有可能用一个div来代替html中的输入，当单击该div时，会打开一个Javascript中的输入？你的意思是当他们单击

div

时打开文件选择对话框，而不是在页面上声明输入？他们仍然必须选择要使用的文件。是吗？是的，所以console.log（$（xmlDoc）.find（“friend”）.text（）在控制台中不显示任何内容，而不是在html中输入代码，而是在JavaScriptAll中输入代码。只需检查一件事，而不是有friend，它不是peopleNetwork，因为该部分包含对我希望在我的网站上显示的数据的引用。您好，有没有可能用一个div来代替html中的输入，当单击该div时，会打开一个Javascript中的输入？你的意思是当他们单击

div

时打开文件选择对话框，而不是在页面上声明输入？他们仍然必须选择要使用的文件。是吗？是的，所以console.log（$（xmlDoc.find）（“friend”）.text（）在控制台中不显示任何内容，而不是在html中输入代码，而是在JavaScriptAlway中显示。只需检查一件事，而不是有friend，它不会是peopleNetwork，因为该部分包含对我希望在我的网站上显示的数据的引用。

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

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

    $(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/>')
        }
    });
});