时间戳

首页 > 解决方案 > 如何在ajax中加载多个项目？

javascript - 如何在ajax中加载多个项目？

问题描述

我试图在单个 HTML 页面中调用不同的外部 SVG。如果我坚持一个，一切都会完美无缺。一旦我想调用不同的 SVG 精灵，我最终只会加载一个。所以基本上，它只加载一个精灵而忽略其他精灵。我在这里的语法中遗漏了什么吗？

我正在使用以下ajax代码//我是新手，所以我确定我在这里犯了一个可怕的错误:)

<script>
var ajax = new XMLHttpRequest();
ajax.open("GET", "sprite1", "sprite2", "sprite3", true);
ajax.send();
ajax.onload = function(e) {
var div = document.createElement("div");
div.innerHtml = ajax.responseText;
document.body.insertBefore(div, document.body.childNodes[0]);
}
</script>

然后在 HTML 中我使用这个

<svg class="sprite1">
    <use xlink:href="#icon-name">
</svg>

标签： javascripthtmlajaxsvg

解决方案

该XMLHttpRequest.open()方法只能接受一个 URL，因此您需要为每个精灵单独请求。试试这样：

var sprites = ["sprite1", "sprite2", "sprite3"];

sprites.foreach(function(sprite, index) {
   var ajax = new XMLHttpRequest();
   ajax.open("GET", sprite, true);
   ajax.send();
   ajax.onload = function(e) {
      var div = document.createElement("div");
      div.innerHtml = ajax.responseText;
      document.body.insertBefore(div, document.body.childNodes[0]);
   };
});

请注意，无法保证精灵返回的顺序，因此您可能希望将每个精灵加载到 HTML 中的特定元素。您可以使用index示例中的 来确定已加载的内容。

推荐阅读