Question

我尝试过在线发布的许多解决方案，但没人能解决我的问题。我有一个带有一些基本元素的php页面。特别是我想实现一个显示txt文件文本的文本区域（只读）。我希望它能够自动更新＆＃34;文本每1秒或更短时间不按任何按钮或重新加载页面......这就是我现在所拥有的：

<html>
    <head>
        <title>Yun_TempServer_Home</title>

        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            function getFileContents() {
                var client = new XMLHttpRequest();
                client.open('GET', '/sd/status.txt');
                client.onreadystatechange = function () {
                    document.querySelector("textarea").value = client.responseText;
                }
                client.send();
            }
            setInterval(getFileContents, 1000);

        </script>
    </head>
    <body>

        <textarea  id="textarea"rows="15" cols="50" readonly>
        </textarea>

    </body>
</html>

现在它可以工作，但有时它只读取新文本的一部分，有时它不会更新代码30-40秒。我对php，html和javascript都非常基础，所以请解释一下我该如何解决这个问题..

由于

Answer 1

最后我得到了答案，这似乎工作得很好！我发现这篇文章： How to read a local text file? 特别是我用了答案：

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

因为我不想要alert()我只是修改了一下。这是我现在的代码：

<script>
    function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", "/sd/status.txt", false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                 document.querySelector("textarea").value = allText;
            }
        }
    }
    rawFile.send(null);
}
    setInterval(readTextFile, 1000);

</script>

使用setInterval(readTextFile, 1000);，它每秒执行一次读数。如果有人想提出一些变化，我正在等待它！

更新10/04：我用AJAX代码替换了XMLHttpRequest()。这是完美的结果：

<script>
    function readTextFile(file)
{
    var x = document.getElementById("autoScroll").checked; //if autoscrool is checked
    if(x==true){
     document.getElementById("textarea").scrollTop = document.getElementById("textarea").scrollHeight; //autoscroll
    }

    var filePath = "http://192.168.1.50/sd/status.txt"

    $.ajax({
    dataType: "text",
    success : function (data) {
            $("#textarea").load(filePath);
            }
    });

}
setInterval(readTextFile, 1000);

</script>

这里是html部分：

<html>
<textarea  id="textarea" rows="15" cols="50" readonly autocomplete="off">

</textarea>

<br>
<form>
<input id="clear" type="button" value="Clear">
<label><input type="checkbox" value="AutoScroll" id="autoScroll" label="Auto Scroll"checked>    Auto-Scroll</label>
</form>
</html>

我添加了自动滚动复选框以激活或停用textarea的自动滚动。

从txt文件自动更新文本区域

1 个答案: