Question

我想在我的div中加载一些XML源代码。 div结构是相同的，但每个都有一个data-XML属性，给出了它的xml文件的链接。因此div必须提供其XML数据。当然所有XML文件的结构都是一样的，但我试图创建一个函数，它接受XML和HTML元素，然后在div中添加数据。

JSFIDDLE

HTML：

<div class="data" data-xml="https://dl.dropboxusercontent.com/u/33538012/file1.xml">
</div>
<div class="data" data-xml="https://dl.dropboxusercontent.com/u/33538012/file2.xml">
</div>

JS：

$(".data").each(function() {
  // store element instance 
  var elem = $(this);
  var path = $(this).attr("data-xml");

  $.ajax({
    url: path,
    dataType: "xml",
    success: function(xml) {
      parse(document, elem);
    },
    error: function() {
      alert("Error: Something went wrong with loading the playlist!");
    }
  });

});

function parse(document, elem) {
  console.log($(document).find("name").text());

  $(document).find("person").each(function() {
    var $person = $(this);
    elem.append(
      "<div class='name'>Name: " +
      $person.find("name").text() +
      "</div><div class='title'>Title: " +
      $person.find("title").text() + "</div>")

  });
}

目前尚未显示任何数据。我希望每个框都根据给定的XML文件显示数据。

Answer 1

您要做的是违反了same origin policy。由于您无法控制Dropbox端点，因此无法使用。您必须在与您的网站相同的域上的服务器上编写代理脚本，以便AJAX请求成功。

或者，如果您可以控制端点，则可以发送CORS header以使其正常工作。

Answer 2

您发送的是文档对象＆＃34; xml＆＃34;对象

success: function(xml) {
  parse(document, elem); // should be - parse(xml, elem)
}

通过相同的函数解析来自各种xml源的数据

2 个答案: