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

Question

我希望有人能够提供帮助。我对java等很陌生，但是通过谷歌管理学习了很多！ :)

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

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

纯文本文件当前包含 单个 组（有 30 多个组）的会议日期，这是由另一个本地系统生成的，每周将上传到服务器一次。当组网页加载时，它会加载适当的组会议文本文件并显示结果。在测试期间，这工作正常。这是我用于测试的一个基本示例（由 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 个以上的未来会议日期，因此这需要生成和上传 30 多个文件。

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

可以在 ALL GROUPS 的 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 管理员？控制？

问题.... 如何打开文本文件、读取和填充/显示所需群组到群组网页上的文本/会议日期？这可能吗，如果有的话，我会怎么做？

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

鲍里斯 :)

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"] 将为您提供未来会议的列表给约翰。

以下是每个页面上的脚本可能是什么样子的想法：

   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');

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