Question

我目前有3个文件;它们位于我的计算机上的同一目录中：

project.html
javascript.js
的text.txt

'project.html'中的代码

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="javascript.js">
    </script>
    <script
        //calling the Google Maps API
    </script>

    <script>
        //code to initialize Google Maps
    </script>
</head>

<body>
    <div class="content">
        <div id="googleMap"></div>
        <div id="right_pane_results">hi</div>
        <div id="bottom_pane_options">
            <button onclick="get_parameters()">Try It</button>
        </div>
    </div>
</body>
</html>

'javascript.js'中的代码

function get_parameters() {
    alert('hi');
    var xhr = new XMLHttpRequest();

    xhr.addEventListener('readystatechange', (output) => {
      if (xhr.readyState === 4) {
        var response = xhr.responseText;
        callback(response);
      }
    });

    xhr.open('GET', 'text.txt', true);
    xhr.send();
}

'text.txt'中的文字

铁
铝
钢

等...（接近150行）

在一切结束时，我想将'text.txt'解析成一个数组并使用该数组创建一个包含数组内容的选项菜单。我发布了一个问题，询问我是否可以使用JavaScript解析文件，答案是否由于安全问题。 JavaScript代码是我尝试过的但是没有用。那就是说，我可以使用另一种语言来读取文件并创建选项菜单吗？

我最终希望在'project.html'文件中有这样的内容（下面）：

<select>
    <option value="1">Line 1 of File</option>
    <option value="2">Line 2 of File</option>
    <option value="3">Line 3 of File</option>
        <!-- etc... -->
</select>

要记住的一些事情：

服务器上的所有文件都不，而是从我的计算机上运行（所以我猜想像PHP这样的服务器大小的语言不是一种选择）
我想根据'text.txt'
文件位于同一目录中
我不希望用户能够选择要读取的文件。 'text.txt'是一个由我制作并可能改变的另一个程序制作并填充的文件;这就是我每次加载页面时都想读取文件的原因。

Answer 1

如果您可以调整浏览器设置，则没有理由不使用javascript来执行此操作。下面是一个使用jQuery的例子，你可以将它转换为普通的Javascript，但这将需要更多的代码。

$(document).ready(function() {
    //fetch text file
    $.get('text.txt', function(data) {
        //split on new lines
        var lines = data.split('\n');
        //create select
        var dropdown = $('<select>');
        //iterate over lines of file and create a option element
        for(var i=0;i<lines.length;i++) {
            //create option
            var el = $('<option value="'+i+'">'+lines[i]+'</option>');
            //append option to select
            $(dropdown).append(el);
        }
        //append select to page
        $('body').append(dropdown);
    });
});

它在IE10上工作正常，只是一个对话框询问我是否想要阻止内容运行。其他浏览器可能需要或可能不需要使用其他安全设置来使其工作。

Answer 2

如果您没有网络服务器，则无法执行标准XHR请求：XHR请求涉及对您不具备的Web服务器执行HTTP请求。

来自XMLHttpRequest specification：

除了HTTP和HTTPS之外，某些实现还支持协议，但该规范未涵盖该功能

因此，某些浏览器通过自动将XHR请求转换为＆＃34; normal＆＃34;来支持file协议。文件加载，但你需要做些什么来使它工作可能因浏览器而异，我不鼓励你遵循这条道路。

最佳解决方案是使用轻量级Web服务器并将其与您的应用程序一起分发。

一旦您可以对Web服务器执行AJAX请求，请使用split检索文件内容并获取行数组。我假设从这一点开始你知道如何迭代数组并因此修改DOM。

你提到过这个项目的匆忙。可能你可以在你的应用程序中包含jQuery，以使你的生活更轻松。

Answer 3

或香草：

function get_parameters() {
alert('hi');
var xhr = new XMLHttpRequest();

xhr.addEventListener('readystatechange', (output) => {
  if (xhr.readyState === 4) {
    var response = xhr.responseText;
    var lines = response.split('\n');
    var i = 0;
    var select = document.createElement('select');
    do
    {
      var option = document.createElement('option');
      option.value = i;
      option.text = lines[i];
      select.appendChild(option);
      i++;
    }while(i<lines.length);
    document.body.appendChild(select);
  }
});

xhr.open('GET', 'text.txt', true);
xhr.send();
}

将文本文件解析为数组？

3 个答案: