javascript - 使用 XMLHttpRequest 请求在 JavaScript 中显示纯文本文件的选定部分

Question

希望有人能够提供帮助。我对 java 等很陌生，但是已经通过 Google 学到了很多东西! :)

这就是我目前正在做的事情。

我正在读取服务器端(同一域等)纯文本文件，并使用 XMLHttpRequest 将内容加载到 HTML 页面中。我使用这种方法是因为样式/格式可以应用于导入的纯文本。

纯文本文件当前包含单个组(有 30 多个组)的 session 日期，该文件由另一个本地系统生成，每周上传到服务器一次。当组网页加载时，它会加载适当的组 session 文本文件并显示结果。在测试过程中，这工作正常。这是我用于测试的一个基本示例(由 Paul S here 在 2013 年发布)，它100%可以很好地在页面加载时加载和显示文本文件(还有额外的 CSS 等)未显示):

<!--  Load Group X Meetings -->
<script type="text/javascript">
 function populatePre(url) {
      var xhr = new XMLHttpRequest();
           xhr.onload = function () {
           document.getElementById('Meetings').textContent = this.responseText;
           };
     xhr.open('GET', url);
     xhr.send();
 }
 populatePre('/meeting-assets/group1meetings.txt');
</script>

<div>
    <pre id="Meetings" </pre>
</div>

每个组的当前纯文本文件格式示例如下:

Mon, xxth Sep 2017 03:00 PM
Wed, xxth Sep 2017 03:30 PM
Fri, xxth Sep 2017 01:00 PM
Mon, xxth Oct 2017 03:00 PM
Wed, xxth Oct 2017 03:30 PM
Fri, xxth Oct 2017 01:00 PM

我想做什么

如上所述，目前有 30 多个小组，每个小组都安排了 15 个以上的 future session 日期，因此这需要生成和上传 30 个以上的文件。

理想情况下...我只想上传一个单个 MASTER 文本文件，其中包含所有组的 session ，并在每个网页上使用相同的脚本，但在脚本中使用变量来显示仅限所需小组的 session 。我可以完全控制文本文件的生成方式。

在 MASTER 文本文件中为所有组生成的示例可能是这样的(但一切皆有可能 - 每个组都有一个独特的名称部分，例如“PAULS”和常量，如“GROUP”):

PAULS GROUP     
Mon, xxth Sep 2017 03:00 PM
Wed, xxth Sep 2017 03:30 PM
Fri, xxth Sep 2017 01:00 PM
Mon, xxth Oct 2017 03:00 PM
Wed, xxth Oct 2017 03:30 PM
Fri, xxth Oct 2017 01:00 PM
JENNYS GROUP    
Mon, xxth Sep 2017 03:00 PM
Wed, xxth Sep 2017 03:30 PM
Fri, xxth Sep 2017 01:00 PM
Mon, xxth Oct 2017 03:00 PM
Wed, xxth Oct 2017 03:30 PM
Fri, xxth Oct 2017 01:00 PM
JOHNS GROUP    
Mon, xxth Sep 2017 03:00 PM
Wed, xxth Sep 2017 03:30 PM
Fri, xxth Sep 2017 01:00 PM
Mon, xxth Oct 2017 03:00 PM
Wed, xxth Oct 2017 03:30 PM
Fri, xxth Oct 2017 01:00 PM

• 只会从文本文件中提取“已知”组
• 每个网页专门针对一个已知群组并显示相关信息与集团相关。
• 理想情况下，我希望在每个页面上复制/使用相同的脚本，并且仅更改单个变量以获取正确的群组信息。
• 我可以控制网页内容并可以插入脚本/代码等
• 这些页面是在托管环境中生成的 HTML 页面，我有 Cpanel 访问权限等，但没有 root 管理员权限？控制？

问题....如何打开文本文件，读取所需群组的文本/ session 日期并将其填充/显示到群组网页上？这可能吗？如果有的话，我有什么想法可以解决这个问题吗？

我已尝试提供清晰的信息，如果需要更多信息，请告诉我。任何指导/帮助将不胜感激。

鲍里斯:)

Answer 1

通常，人们使用 JSON 格式的文件来实现与您所需的类似目的。

服务器上是否有一个名为 groupmeetings.json 的文件，格式如下:

{
  "PAULS GROUP":[
   "Mon, xxth Sep 2017 03:00 PM",
   "Wed, xxth Sep 2017 03:30 PM",
  ],
  "JOHNS GROUP":[
   "Mon, xxth Sep 2017 03:00 PM",
   "Wed, xxth Sep 2017 03:30 PM",
 ]
}

然后，您将能够使用 XmlHttpRequest 从服务器检索 JSON 文件，使用 JSON.parse() 将其解析为 JavaScript 对象，并访问对象中的每个人组，例如 parsedJSON["JOHNS GROUP"] 将为您提供 John future session 的列表。

以下是每个页面上的脚本的外观:

   function populatePre(url) {
      var xhr = new XMLHttpRequest();
           xhr.onload = function () {
            var groupMeetingsJSON = JSON.parse(this.responseText);
            var johnsGroupMeetings = groupMeetingsJSON["JOHNS GROUP"]
            johnsGroupMeetings.forEach(function(scheduledMeeting){
               var div = document.createElement('div');
               div.innerHTML = scheduledMeeting.trim().replace(/\r?\n|\r/g,'');
               document.getElementById('Meetings').appendChild(div);
            });
           };
     xhr.open('GET', url);
     xhr.send();
 }


populatePre('/meeting-assets/groupmeetings.json');

另一种选择是在每个组之间的纯文本文件中显然推断出某种分隔符。您必须有一种方法来逻辑地推断出每组的开始和结束。这可能只是在文本文件中找到新的组标题时发生。当您收到纯文本文件时，您必须忽略文本文件的其余部分，并找到对特定组页面有意义的部分。