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

Question

I have spent many hours trying to figure this out, though it seems it should be quite straightforward. 我花了很多时间试图弄清楚这一点，尽管看起来应该很简单。 I'm working on a website with a javascript file that generates html code given the pathname of a folder. 我正在一个带有JavaScript文件的网站上工作，该JavaScript文件在给定文件夹路径名的情况下生成html代码。 Currently I am able to pull images from those folders no problem, but am trying to figure out .txt files... 目前，我能够从那些文件夹中提取图像没有问题，但是我正在尝试找出.txt文件...

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

info[i] is an array storing the name of each folder I want to grab files from... info [i]是一个数组，用于存储我要从中获取文件的每个文件夹的名称。

So in every folder there is an image called picture.png, there is also a text file called details.txt 因此，在每个文件夹中都有一个名为picture.png的图像，还有一个名为details.txt的文本文件。

Is it possible to have something like... 是否可能有类似...

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

I have also tried the following code, I simply can't get the .txt contents to showup in the browser. 我也尝试了以下代码，但我无法将.txt内容显示在浏览器中。 The .txt file has words in it, and is in the same folder as the html file... If I can get the code below to work and display the file on the webpage, then I'll be able to answer the rest of my question. .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>

Thank you for your time, any help is greatly appreciated. 感谢您的宝贵时间，我们将为您提供任何帮助。

Answer 1

If you use PHP then it is comparatively easy 如果您使用PHP，则相对比较容易

first use PHP code to get the file contents 首先使用PHP代码获取文件内容

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

Then in JavaScript transfer the variable 然后在JavaScript中传输变量

<script>

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

</script>

Answer 2

If you're working completely in the client, you really only have one option if you must work with .txt files, and not .js files (which would allow you to "require" the JS data files as needed. 如果您完全在客户端中工作，则只有在必须使用.txt文件而不是.js文件的情况下，您实际上只有一个选择（这使您可以根据需要“请求” JS数据文件）。

AJAX AJAX

If you don't know anything about AJAX, the key thing to know is that it is asynchronous . 如果您对AJAX一无所知，则关键要知道它是异步的 。 This means that the lines following the AJAX call will be run before the file is guaranteed to be loaded. 这意味着AJAX调用后的行将在保证文件被加载之前运行。 An implementation might look something like the following, for your case: 对于您的情况，实现可能类似于以下内容：

;(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();
})();

If, however, you can access the list of folders (the info[i] variable) from PHP, then you could easily do something like the following: 但是，如果可以从PHP访问文件夹列表（info [i]变量），则可以轻松地执行以下操作：

PHP 的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 个解决方案

解决方案1
0 2014-05-21 22:58:39

解决方案2
0 2014-05-21 23:47:31

AJAX AJAX

PHP 的PHP

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

问题描述

2 个解决方案

解决方案1 0 2014-05-21 22:58:39

解决方案2 0 2014-05-21 23:47:31

AJAX AJAX

PHP 的PHP

解决方案1
0 2014-05-21 22:58:39

解决方案2
0 2014-05-21 23:47:31