从 url 读取 txt 文件 (javascript)
Posted
技术标签:
【中文标题】从 url 读取 txt 文件 (javascript)【英文标题】：reading txt file from url (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 是什么意思，要去谷歌
【参考方案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/***/… 的远程资源。这可以通过将资源移动到同一域或启用 CORS 来解决。 我可以在浏览器中毫无问题地打开 .txt 文件（通过将 url 粘贴到浏览器 url 中） 本地有文本文件吗？在你的服务器上试试。如果您正在尝试加载远程文件，这并不是那么简单，因为您可以看到您遇到了跨域问题。如果它是一个 json 文件，你可以使用 jsonp 调用。那么，让我们从这个开始 - 文本文件与脚本在同一台服务器上吗？ 嘿，我以前有本地文件，只需使用 (input type="file") 按钮打开它们，但现在我希望能够链接到不同服务器上的 .txt 文件，主要是这样用户可以上传他们的文件，然后链接到他们。我是否应该通过输入类型文件将文件上传到我的服务器，然后从那里加载它们？我想我也需要 ajax，对吧？以上是关于从 url 读取 txt 文件 (javascript)的主要内容，如果未能解决你的问题，请参考以下文章
C# 使用 HTTPS 从 URL 读取 XML 文件。 （使用 godaddy 托管）（来自 ZerosSSL 的证书）