Question

我有一个使用jquery解析的XML，它可以工作，但是我只想获取XML数据的一部分，然后将所有这部分保存到本地存储中。

我的xml如下

<channel id="123"><display-name>123</display-name></name></channel>
<channel id="123"><display-name>123</display-name></name></channel>
<channel id="123"><display-name>123</display-name></name></channel>
<programme id="123"><display-name>123</display-name></name></programme>
<programme id="123"><display-name>123</display-name></name></programme>
<programme id="123"><display-name>123</display-name></name></programme>

但是我只想获取所有<programme>数据，然后将其保存到本地存储。我不确定如何只能抓取程序部分。

我尝试保存整个xml，但是似乎没有输出任何数据。这就是我尝试过的。

<div id="text"></div>

$(function(){

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

window.localStorage.setItem('fullxml', xml)
$("#text").append(window.localStorage.getItem('fullxml'));

  },
  error: function() {
    alert("An error occurred while processing XML file.");
  }
  });
});

Answer 1

要从XML文档中获取特定节点，可以选择XML节点，如下所示：

Javascript：

var programmeNodes = fullxml.getElementsByTagName('programme');

jQuery：

var programmeNodes = $(fullxml).find('programme');

我的解决方案：

此解决方案将获取所有<programme>个节点，并将数据保存到一个数组中，然后将该数组存储在本地存储中以供以后使用。

给出如下XML数据：

var xml = `
    <programmes>
        <programme id="1">
            <display-name>Test 1</display-name>
        </programme>
        <programme id="2">
            <display-name>Test 2</display-name>
        </programme>
  </programmes>
`;

将提供这样的对象数组，然后可以将其存储。

[
    {
        id: 1,
        name: Test1
    },
    {
        id: 2,
        name: Test2
    }
]

完整的演示代码：

var xml = `
    <programmes>
        <programme id="1">
            <display-name>Test 1</display-name>
        </programme>
        <programme id="2">
            <display-name>Test 2</display-name>
        </programme>
    </programmes>
`;

var fullxml = $.parseXML(xml);

// find <programme> XML elements

var programmeNodes = $(fullxml).find('programme');

// create array for programme data

var programmesArr = [];

// loop through each programme and store data in array

$.each(programmeNodes, function(i) {
    var programmeID = $(programmeNodes[i]).attr('id');
  var programmeDisplayName = $(programmeNodes[i]).find('display-name').text();
  programmesArr.push({
    id: programmeID,
    name: programmeDisplayName
  });
});

// store programmesArr in local storage
// localStorage only allows strings, so we need to convert array to JSON string

localStorage.setItem('programmes', JSON.stringify(programmesArr));

// get programmes from local storage

var storedProgrammes = JSON.parse(localStorage.getItem('programmes'));

演示： https://jsfiddle.net/1nLw7hjr/13/

用法：

var programmeToFind = 2;

var programme = $.grep(storedProgrammes, function(e) {
    return e.id == programmeToFind;
});

console.log(programme[0].id); // 2
console.log(programme[0].name); // Test2

或作为一个小功能：

function searchProgrammes(id) {
    var programme = $.grep(storedProgrammes, function(e) {
        return e.id == id;
    });
    return programme[0];
}

var programme = searchProgrammes(2);

console.log(programme.id); // 2
console.log(programme.name); // Test2

grep()

查找满足过滤器功能的数组元素。的原始数组不受影响。

Answer 2

我认为您没有得到任何响应，因为当您将XML附加到文档时，浏览器会尝试解析它，并且由于这不是有效的HTML，它会失败并且仅显示文本，而不显示标签。因此，最简单的解决方案是不使用jQuery的append()方法，而是通过text()附加XML（它不会解析HTML标记，而是转义它们），例如：

$(function() {
  $.ajax({
    type: "GET",
    url: "/myxml",
    dataType: "xml",
    success: function(xml) {
      window.localStorage.setItem('fullxml', xml);
      var el = $("#text");
      el.text(el.text() + window.localStorage.getItem('fullxml'));
    },
    error: function() {
      alert("An error occurred while processing XML file.");
    }
  });
});

编辑：

如果只想存储一些元素，则应将XML转换为对象。使用DOMParser，如下所示：

$(function() {
  $.ajax({
    type: "GET",
    url: "/myxml",
    dataType: "xml",
    success: function(xml) {
      var xmldoc;

      if (window.DOMParser) {
        parser = new DOMParser();
        xmldoc = parser.parseFromString(xml, "text/xml");
      } else { // Internet Explorer
        xmldoc = new ActiveXObject("Microsoft.XMLDOM");
        xmldoc.async = false;
        xmldoc.loadXML(xml);
      }

      var programmes = xmldoc.getElementsByTagName('programme');
      var str = '';
      programmes.forEach(function(el) {
        str += el.outerHTML;
      });
      // str now contains only the <programme> elements
      window.localStorage.setItem('fullxml', str);
      var el = $("#text");
      el.text(el.text() + window.localStorage.getItem('fullxml'));
    },
    error: function() {
      alert("An error occurred while processing XML file.");
    }
  });
});

jQuery解析XML并将部分XML保存在本地存储中

2 个答案:

编辑：