Javascript 如何从txt文档中的列表中获取文本字符串？_Javascript_Jquery_Html_Ajax

Javascript 如何从txt文档中的列表中获取文本字符串？

javascript jquery html ajax

Javascript 如何从txt文档中的列表中获取文本字符串？,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,如果我想在我的站点上有一个包含文本的div，并且我想每隔5秒用一个从外部文本文件列表中获取的新文本字符串替换该文本，我该怎么办类似这样的东西，但在“textlist”div中，它从文本文件中放入第一个sting，然后在5秒后用第二行的文本替换它，依此类推代码：测试文本函数运行（）{ document.getElementById（“textlist”）.innerHTML=“文本文件中的sting”； } 设置间隔（运行，5000）；正文文本文件如下所示，例如： /mytextf

如果我想在我的站点上有一个包含文本的div，并且我想每隔5秒用一个从外部文本文件列表中获取的新文本字符串替换该文本，我该怎么办

类似这样的东西，但在“textlist”div中，它从文本文件中放入第一个sting，然后在5秒后用第二行的文本替换它，依此类推

代码：


测试文本
函数运行（）{
document.getElementById（“textlist”）.innerHTML=“文本文件中的sting”；
}
设置间隔（运行，5000）；
正文

文本文件如下所示，例如：

/mytextfile.txt

（文件中的内容）

01：提示1

02：提示2

03：提示3

04：提示4

05：提示5

06：提示6

提前感谢，希望它有意义。

您可以使用

ajax

来实现这一点。使用

jquery

（已附在文档中）您可以轻松地执行以下操作：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test_text</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script>
     var lines="";
    $.get( "your_text_file_path", function( data ) {
        lines=data.split("\n");


    });

    var i=0;  
    window.setInterval(function (){
     if(i<=lines.length){ 
     $("#textlist").html(lines[i]);
      i++;
      }else{
       i=0;
      }
    },5000);

    </script>
    </head>

    <body>
    <div id="textlist">the text</div>
    </body>
    </html>


测试文本
var行=”；
$.get（“您的文本文件路径”），函数（数据）{
行=数据。拆分（“\n”）；
});
var i=0；
window.setInterval（函数（）{
如果（i您可以使用ajax
进行此操作。使用jquery
（已附在您的文档中），您可以轻松地执行以下操作：
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test_text</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script>
     var lines="";
    $.get( "your_text_file_path", function( data ) {
        lines=data.split("\n");


    });

    var i=0;  
    window.setInterval(function (){
     if(i<=lines.length){ 
     $("#textlist").html(lines[i]);
      i++;
      }else{
       i=0;
      }
    },5000);

    </script>
    </head>

    <body>
    <div id="textlist">the text</div>
    </body>
    </html>


测试文本
var行=”；
$.get（“您的文本文件路径”），函数（数据）{
行=数据。拆分（“\n”）；
});
var i=0；
window.setInterval（函数（）{
如果（i我会做一些不同的事情：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_text</title>
</head>

<body>
<div id="textlist">the text</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(document).ready(function () {
  var ajax = $.ajax({
    url: 'the url to the text list',
    type: 'GET'
  });

  ajax.done(function (data) {
    var list = $.trim(data).split(/\n+/), index = 0;

    function run() {
      if (index >= list.length) {
        index = 0;
      }
      $('#textlist').html(list[index]);
      index ++;
    }

    window.setInterval(run, 5000);
  });
});
</script>
</body>
</html>


测试文本
正文
$（文档）.ready（函数（）{
var ajax=$.ajax({
url:“文本列表的url”，
键入：“获取”
});
完成（函数（数据）{
var list=$.trim（数据）.split（/\n+/），index=0；
函数运行（）{
如果（索引>=列表长度）{
指数=0；
}
$（'#textlist'）.html（列表[索引]）；
索引++；
}
设置间隔（运行，5000）；
});
});

因此，在本例中，我们首先将所有脚本移动到正文的底部，这样我们可以确保在脚本运行之前已呈现html
其次，我们将自定义JavaScript放入jQueryDocReady中，这样我们就更加安全了，在脚本尝试运行之前，页面是完全交互的
下一步我们要做的是使用ajax获取文本文件。由于同源策略，只有当该文件位于为网页提供服务的同一服务器上时，这才有效
之后，我们将一个处理程序附加到ajax承诺中。换句话说，当ajax请求“完成”时，它将运行一个函数并传入检索到的数据。我们将字符串中的空格修剪掉，并在有新行的地方将其拆分，从而将数据转换为一个列表。我们还设置了一个变量来跟踪我们在列表中的位置
run
函数将检查我们在列表中的位置。如果我们超出了列表中的项目数量，我们将将其重置为0。然后我们将用当前列表项目替换元素的html。最后，我们将在列表中向上移动一个位置
最后，我们调用setInterval
，以便run
每5秒运行一次
警告：我还没有测试过这一点，但从概念上讲它会起作用。可能有输入错误，或者可能有一些特定的ajax要求，我不知道这与您的服务器有关，但我所描述的过程应该会起作用。
我会做一些不同的事情：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_text</title>
</head>

<body>
<div id="textlist">the text</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(document).ready(function () {
  var ajax = $.ajax({
    url: 'the url to the text list',
    type: 'GET'
  });

  ajax.done(function (data) {
    var list = $.trim(data).split(/\n+/), index = 0;

    function run() {
      if (index >= list.length) {
        index = 0;
      }
      $('#textlist').html(list[index]);
      index ++;
    }

    window.setInterval(run, 5000);
  });
});
</script>
</body>
</html>


测试文本
正文
$（文档）.ready（函数（）{
var ajax=$.ajax({
url:“文本列表的url”，
键入：“获取”
});
完成（函数（数据）{
var list=$.trim（数据）.split（/\n+/），index=0；
函数运行（）{
如果（索引>=列表长度）{
指数=0；
}
$（'#textlist'）.html（列表[索引]）；
索引++；
}
设置间隔（运行，5000）；
});
});

因此，在本例中，我们首先将所有脚本移动到正文的底部，这样我们可以确保在脚本运行之前已呈现html
其次，我们将自定义JavaScript放入jQueryDocReady中，这样我们就更加安全了，在脚本尝试运行之前，页面是完全交互的
下一步我们要做的是使用ajax获取文本文件。由于同源策略，只有当该文件位于为网页提供服务的同一服务器上时，这才有效
之后，我们将一个处理程序附加到ajax承诺中。换句话说，当ajax请求“完成”时，它将运行一个函数并传入检索到的数据。我们将字符串中的空格修剪掉，并在有新行的地方将其拆分，从而将数据转换为一个列表。我们还设置了一个变量来跟踪我们在列表中的位置
run
函数将检查我们在列表中的位置。如果我们超出了列表中的项目数量，我们将将其重置为0。然后我们将用当前列表项目替换元素的html。最后，我们将在列表中向上移动一个位置
最后，我们调用setInterval
，以便run
每5秒运行一次
警告：我还没有测试过这个，但从概念上讲它会起作用。可能有输入错误，或者可能有一些特定的ajax要求，我不知道这与您的服务器有关，但我描述的过程应该会起作用。
如果与PHP无关，请不要用PHP标记它；如果与PHP无关，请不要用PHP标记它；如果与PHP无关，请添加所有text从该txt文件开始，而不是一次执行一行？这是否只是将该txt文件中的所有文本添加进来，而不是一次执行一行？