[英]How to show use jQuery load() to ajax multiple items into multiple elements?
[英]How to load multiple items in 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>
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
来确定已加载的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.