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

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

javascript php html file

如何使用Javascript（或PHP）读取.txt文件并将内容插入html网页？,javascript,php,html,file,Javascript,Php,Html,File,我花了很多时间试图弄明白这一点，尽管看起来应该很简单。我正在开发一个带有javascript文件的网站，该文件根据文件夹的路径名生成html代码。目前，我能够从这些文件夹中提取图像没有问题，但我试图找出.txt文件 document.write('<img src="folder/' + info[i] + '/picture.png">'); 我还尝试了以下代码，我根本无法在浏览器中显示.txt内容。txt文件中包含单词，并且与html文件位于同一文件夹中。。。如果我能让下面的

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

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

我还尝试了以下代码，我根本无法在浏览器中显示.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>


内容：
var详细信息=“”；
文件。书写（细节）；

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

如果您使用PHP，那么就比较容易了

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

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

然后在JavaScript中传输变量

<script>

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

</script>


var详细信息=“”；

如果您完全在客户机中工作，那么如果您必须使用.txt文件，而不是.js文件（这将允许您根据需要“需要”js数据文件），您实际上只有一个选项

如果您对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();
})();

；（函数（）{
var req=新的XMLHttpRequest，
文件夹=文件夹；
//加载后输出将进入的Div
文件。写（“”）；
请求打开（'GET'，'folder/'+folder+'/details.txt'）；
req.onreadystatechange=函数（）{
如果（req.readyState==4）{
document.getElementById（folder.innerHTML=req.responseText；
}
}
请求发送（）；
})();

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

PHP

文件是在服务器端还是客户端？您可以使用ajax读取txt文件，但首先您可能想了解如何创建HTML元素，而不是使用document.writeI了解javascript只能在没有ajax的情况下本地读取文件。我已将文件夹中的文件上载到webhosting service index.HTML文件夹，以便会是服务器端吗？抱歉，我不确定JS是否可以读取本地或远程文件，这取决于代码运行的位置（它可以在本地运行）。对于这个问题，知道这些文件在哪里是很重要的。看起来：谢谢，我现在就试试这个。嗯，我试着把它放到html文档中，但页面仍然是空白的。在var details=我添加了文档之后。写入（详细信息）；html文件和details.txt现在在同一个文件夹中，为了进行测试..我还将php部分放在var details=''；document.write（details）中；因为details.txt中的数据是字符串格式的，所以只需在php标记周围加上一个“a”就行了。应该工作谢谢你的快速回复，我也试过了。还有其他几种变体。我不确定我在这里做错了什么。不会有这么难。这很令人惊讶，因为我测试了代码，它确实工作。我对t他从第一篇文章开始编写代码，你可能想再试一次。谢谢，我会尝试一下。如果你第一次发现它不起作用，我做了一些编辑（代码中的拼写错误，我没有测试）

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