Javascript 如果目录中存在文件，则加载JSON数据。_Javascript_Jquery_Html_Json

Javascript 如果目录中存在文件，则加载JSON数据。

javascript jquery html json

Javascript 如果目录中存在文件，则加载JSON数据。,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我会尽我所能解释这个问题，但毫无疑问，它会变得混乱，我已经找了大约3天了，没有运气，所以它要么是不可能的，要么是如此简单，以至于没有人需要问基本上，我在我的web服务器的根目录中有一个文件夹，其中包含不断变化的图像量，我要做的是用jquery扫描该文件夹，并将图像加载到html页面中，我已经完成了这项工作，它可以完美地工作，但我需要它做更多的工作我有一个json文件，看起来像这样 [{ "gamename": "GAME1", "gameimage": "GAME1.jpg"

我会尽我所能解释这个问题，但毫无疑问，它会变得混乱，我已经找了大约3天了，没有运气，所以它要么是不可能的，要么是如此简单，以至于没有人需要问

基本上，我在我的web服务器的根目录中有一个文件夹，其中包含不断变化的图像量，我要做的是用jquery扫描该文件夹，并将图像加载到html页面中，我已经完成了这项工作，它可以完美地工作，但我需要它做更多的工作

我有一个json文件，看起来像这样

[{
    "gamename": "GAME1",
    "gameimage": "GAME1.jpg",
    "orientation": "horizontal"
},
{
    "gamename": "GAME2",
    "gameimage": "GAME2.jpg",
    "orientation": "horizontal"
},

我需要它做的是搜索图像文件夹中的图像，如果它找到图像，将其加载到html页面（我现在可以这样做），然后找到该游戏图像的相应json数据，并将其显示在加载的图像下面

这是我当前正在扫描文件夹并加载jpg图像的代码

<html>
<head>
    <script type="text/javascript" src="resources/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="l-content">
    <div class="cell pure-g">
    </div>
</div>
<script>
var dir = "/images/";
var fileextension = ".jpg";
$.ajax({
    url: dir,
    success: function (data) {
        $(data).find("a:contains(.jpg)").each(function () {
            var filename = this.href.replace(window.location.host, "").replace("http:///", "");
            $(".pure-g").append($("<img class=\"game-img\" src=" + dir + filename + "></img><br>"
            ));
        });
    }
});
</script>
</body>
</html>


var dir=“/images/”；
var fileextension=“.jpg”；
$.ajax({
网址：dir，
成功：功能（数据）{
$（数据）.find（“a:contains（.jpg）”）.each（函数（）{
var filename=this.href.replace（window.location.host，“”）。replace（“http:///”，“”）；
$（“.pure-g”）。追加（$（“
”
));
});
}
});

非常感谢您的帮助，我知道这可能不是最容易理解的问题，因此如果需要，我将尝试澄清任何问题。

Javascript是一种“客户端”语言，因此它永远无法（直接）访问Web服务器的文件系统。因此，我认为最好的方法是在Web服务器（php、.net、node或任何您知道的）上安装一个脚本，该脚本提供一个json文件，列出javascript目录中的所有图像

在Web服务器上，您有一个执行以下操作的脚本（要遵循伪代码，因为我不知道哪种语言最有用）：

您需要进行一些验证，以确认它是您请求的，或者任何人都可以看到该目录的内容。。。但是，您的jquery可以对上面的脚本发出ajax请求，并知道其中包含什么

听起来您喜欢PHP，因此您的Web服务器文件结构如下所示：

/www/index.html <- has your current jquery
/www/public/[all your images go here]
/www/public.php <- the php script below

$returnJson = array();
$files = scandir('public/'); // You might want this to be an absolute path, if you are playing games with your include path for security reasons

foreach ($files as $file) {
    if (substr($file, 0, 1) == '.') continue; // This skips over invisible files and the current directory and up one directory
    $returnJson[] = $file;
}

echo(json_encode($returnJson)); // This prints out all the files...

然后在JQuery中，您可以解析响应，对其进行迭代，并生成如下URL：{entry in$returnJson}

有意义吗？

您需要澄清每个图像（方向等）对应的json数据存储在哪里。现在还不清楚您需要从何处检索它。您无法扫描文件夹，您可以使用ajax获取文件，但除了使用客户端代码尝试每个可能的文件名外，无法知道文件夹中有哪些文件。值得注意的是，如果您计划使用文件名的模式（如果您可以使用），那么您可以“扫描”通过遵循模式并查看ajax请求是否返回404…@dcarson json文件存储在服务器上与HTML页面相同的目录中。您是否建议我找到php替代方案？我认为您的方法很好。我将用一些PHP更新我的答案，以实现您所说的。

$returnJson = array();
$files = scandir('public/'); // You might want this to be an absolute path, if you are playing games with your include path for security reasons

foreach ($files as $file) {
    if (substr($file, 0, 1) == '.') continue; // This skips over invisible files and the current directory and up one directory
    $returnJson[] = $file;
}

echo(json_encode($returnJson)); // This prints out all the files...