从 URL 读取文本文件（JavaScript）

Question

从 URL 读取文本文件（JavaScript）

3

我正在尝试从用户提供的外部链接中读取 .txt 文件，以便稍后在应用程序中使用它们。现在我只是想将它们显示在一个 div (.output) 中。到目前为止，我已经做了一些工作，但现在我卡住了，不知道该如何继续。

function getText(url){
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.send(null);
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            var type = request.getResponseHeader('Content-Type');
            if (type.indexOf("text") !== 1) {
                return request.responseText;
            }
        }
    }
}

$(".url-input").change(function() {
getText($(".url-input").value);
});

.output {
width:500px;
height:500px;
border: 1px solid black;
}

<!DOCTYPE html>

<html>
   <head>
    <title>Ugh</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="index.css">
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script type="text/javascript" src="index.js"></script>
      
   </head>
   
 <body>
 <div class="output"></div>
 <input class="url-input" type="url">
   </body>
   
</html>

- Miha Šušteršič

2

看起来你的网页正在使用jQuery，因此你可能想尝试使用jQuery的AJAX处理而不是JavaScript的本地方法；在我看来，这样做会更容易处理：http://api.jquery.com/jquery.ajax/ - Hayden Schiff

$(".url-input").value 是错误的，value 是一个 DOM 属性。请使用 jQuery 的 .val() 或使用本地 DOM 对象。 - Sterling Archer

你尝试过使用 Fiddler 工具来查看从 URL 返回的确切内容吗？ - lintmouse

@dustmouse，很遗憾，我不知道你所说的Fiddler是什么，我要去谷歌一下。 - Miha Šušteršič

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tomer Almog · Answer 1

JavaScript获取（请注意，您必须输入带有扩展名（.txt）的文件名：只需将值更改为val()：

$(".url-input").change(function() {
    getText($(".url-input").val());
});

jQuery获取：用这几行代码替换所有的JavaScript：

$(".url-input").change(function() {
    $.get($(this).val(), function( data ) {
        $('.output').html(data);
    });
});

这是更好的选择，因为Ajax Get是异步调用，所以您希望在回调上更新输出值。

顺便说一下，在进行Ajax调用之前，您应该对用户输入进行一些验证。此外，为了消除在输入中添加“.txt”的需要，请将其更改为：

$(".url-input").change(function() {
    $.get($(this).val()+'.txt', function( data ) {
        $('.output').html(data);
    });
});