AJAX

Question

我花了很多时间试图解决这个问题，尽管看起来应该很简单。我正在一个带有javascript文件的网站上工作，该文件根据文件夹的路径名生成html代码。目前我能够从这些文件夹中提取图像没问题，但我想找出.txt文件......

document.write('<img src="folder/' + info[i] + '/picture.png">');

info [i]是一个数组，用于存储我想要从...中获取文件的每个文件夹的名称。

所以在每个文件夹中都有一个名为picture.png的图像，还有一个名为details.txt的文本文件

是否有可能有......

var details;
details = readFile('"folder/' + info[i] + '/details.txt"');
document.write(details);

我也尝试过以下代码，我根本无法在浏览器中显示.txt内容。 .txt文件中包含单词，与html文件位于同一文件夹中... 如果我可以让下面的代码工作并在网页上显示该文件，那么我将能够回答我的其余问题。

<html>
<body>

Contents:

<?php $file_content = file_get_contents('details.txt'); ?>

<script type="text/javascript">

var details = '<?php echo $file_content ; ?>';

document.write(details);

</script>

</body>
</html>

感谢您的时间，非常感谢任何帮助。

Answer 1

如果您使用PHP，则相对容易

首先使用PHP代码获取文件内容

 $file_content = file_get_contents('details.txt');

然后在JavaScript中传输变量

<script>

 var details = '<?php echo $file_content; ?>';

</script>

Answer 2

如果你在客户端完全工作，那么你真的只有一个选项，如果你必须使用.txt文件，而不是.js文件（这将允许你根据需要“需要”JS数据文件。 / p>

AJAX

如果你对AJAX一无所知，关键是要知道它是异步。这意味着在保证加载文件之前将运行AJAX调用之后的行。对于您的情况，实现可能类似于以下内容：

;(function(){
    var req = new XMLHttpRequest,
    folder = folder;

    //Div that the output will go into once it's loaded
    document.write('<div id="' + folder + '"></div>');
    req.open('GET', 'folder/' + folder + '/details.txt');
    req.onreadystatechange = function () {
        if (req.readyState == 4) {
            document.getElementById(folder).innerHTML = req.responseText;
        }
    }
    req.send();
})();

但是，如果您可以从PHP访问文件夹列表（info [i]变量），那么您可以轻松地执行以下操作：

PHP

<?php

    $info = Array("some","folders","to","load");
    foreach($info as $folder) {
        //echo out the image tag followed by the description
        echo '<img src="folder/' . $folder . '/picture.png">';
        readfile("folder/" . $folder . "/details.txt");
    }
?>

如何使用Javascript（或PHP）读取.txt文件并将内容插入到html网页中？

2 个答案:

AJAX

PHP