从 url 读取 txt 文件 (javascript)答案

【问题标题】：reading txt file from url (javascript)从 url 读取 txt 文件 (javascript)
【发布时间】：2015-05-21 14:50:50
【问题描述】：

我正在尝试从用户提供的外部链接中读取 .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>

【问题讨论】：

看起来您在网页上使用了 jQuery，因此您可能想尝试使用 jQuery 的 AJAX 处理而不是 JavaScript 的本机方法；使用恕我直言要容易得多：api.jquery.com/jquery.ajax
$(".url-input").value 是错误的，value 是一个 DOM 属性。使用 jQuery 的 .val() 或者使用原生 DOM 对象
您是否尝试过 Fiddler 以准确查看您从 URL 中返回的内容？
@dustmouse 可悲的是，我不知道你所说的 Fiddler 是什么意思，要去谷歌

标签： javascript html css ajax

【解决方案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);
    });
});

【讨论】：

现在我得到：跨域请求被阻止：同源策略不允许读取topdeckandwreck.com/stackOverflow/… 的远程资源。这可以通过将资源移动到同一域或启用 CORS 来解决。
我可以在浏览器中毫无问题地打开 .txt 文件（通过将 url 粘贴到浏览器 url 中）
本地有文本文件吗？在你的服务器上试试。如果您正在尝试加载远程文件，这并不是那么简单，因为您可以看到您遇到了跨域问题。如果它是一个 json 文件，你可以使用 jsonp 调用。那么，让我们从这个开始 - 文本文件与脚本在同一台服务器上吗？
嘿，我以前有本地文件，只需使用 (input type="file") 按钮打开它们，但现在我希望能够链接到不同服务器上的 .txt 文件，主要是这样用户可以上传他们的文件，然后链接到他们。我是否应该通过输入类型文件将文件上传到我的服务器，然后从那里加载它们？我想我也需要 ajax，对吧？