Question

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

Answer 1

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

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

jQuery get：用以下几行代替所有的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);
    });
});

从url读取文本文件（javascript）

1 个答案: