逐行加载本地文本文件

Question

我正在使用此代码在我的 HTML 中本地加载文件：

jQuery(document).ready(function() {
    jQuery.ajax({
        url : "atxtfile.txt",
        dataType: "text",
        success : function (data) {
            jQuery("#showtxt").html(data);
        }
    });
});

这会显示文本文件，但文本文件中的每一行都不会在 HTML 中显示为新行。那么如何加载 txt 文件并显示它在 txt 文件中的显示方式？

我怎样才能每 10 到 20 秒重新加载一次文件，以便从 txt 文件中获取新数据？

Answer 1

在 html 中的 #showtxt 元素上使用 white-space:pre。（这将保持文件中的文本结构）

#showtxt{
  white-space:pre;
}

(或pre-wrap如果你想要长行换行)

如果你想在 p 中换行，你不应该使用 CSS 而是在将字符串附加到页面之前拆分字符串并逐行执行

success : function (data) {
            var lines = data.split('\n'),
                htmlLines = '<p>' + lines.join('</p><p>') + '</p>';

            jQuery("#showtxt").html(htmlLines);
        }

为了每 20 秒重新加载一次 ajax 和 timeOut

使用一个函数

function readText(){
    jQuery.ajax({
        url : "atxtfile.txt",
        dataType: "text",
        success : function (data) {
            var lines = data.split('\n'),
                htmlLines = '<p>' + lines.join('</p><p>') + '</p>';

            jQuery("#showtxt").html(htmlLines);
            setTimeout( readText, 20000 );
        }
    });
}

jQuery(document).ready(function() {
    readText();
});

逐行加载本地文本文件

Load local text file line by line

html

jquery

load

local