Question

说我有文件夹＆＃34; ../ cars /＆＃34;它包含多个html文件，我想将所有这些文件加载到另一个html文件中。

我可以通过以下方式轻松解决这个问题：

$(document).ready(function (){
     $("#all_cars").load("../cars/civic.html");
     $("#all_cars").load("../cars/durango.html");
     $("#all_cars").load("../cars/mustang.html");
     $("#all_cars").load("../cars/r8.html");
     ... and so on
});

但我想以更复杂的方式做到这一点。我也不想将文件名编码到我的js文件中。我宁愿能够从文件夹中删除该文件，现在又将其加载。有没有办法可以获取cars文件夹中的所有文件名并循环加载它们？

有点像这样：

foreach(cfn in carsFilesNames){
     $("#all_cars").load("../cars/" + carsFileNames);
}

Answer 1

希望这就是你想要的：

$.each([
    'civic.html',
    'durango.html',
    'mustang.html',
    'r8.html'
], function(i,a){
    $("#all_cars").load("../cars/" + a);
});

$.each将遍历数组。

<小时/> 如果您希望自动获取目录中的所有文件并列出它们，并且您的Web服务器上有PHP，请添加名为carindex.php的文件，将其内容设置为：

<?php

print json_encode(scandir('PATH/TO/cars/', 1));

?>

然后在客户端：

$.get('/carindex.php', function (a) {
    a.forEach(function (b) {
        $("#all_cars").load("../cars/" + b);
    });
});

Answer 2

你可以试试这个：

jQuery.ajaxSetup({ async: false }); //if order matters
$.get("file.htm", '', function (data) { $("#result").append(data); });
$.get("pippo.htm", '', function (data) { $("#result").append(data); });
jQuery.ajaxSetup({ async: true });  //if order matters

如何将多个html文件从文件夹加载到div中

2 个答案: