在服务器上，有一个文本文件。在客户端使用 JavaScript，我希望能够读取此文件并对其进行处理。无法更改服务器上文件的格式。
如何将文件的内容放入 JavaScript 变量中，以便进行此处理？文件的大小可以高达 3.5 MB，但可以很容易地以 100 行（1 行是 50-100 个字符）的块进行处理。
文件的任何内容都不应该对用户可见；他会看到文件中数据的处理结果。
如何使用 JavaScript 从服务器读取文本文件？
IT技术
javascript
ajax
file-io
2021-02-01 14:44:50
6个回答
您可以使用隐藏框架，在其中加载文件并解析其内容。
HTML：
<iframe id="frmFile" src="test.txt" onload="LoadFile();" style="display: none;"></iframe>
JavaScript：
<script type="text/javascript">
function LoadFile() {
var oFrame = document.getElementById("frmFile");
var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;
while (strRawContents.indexOf("\r") >= 0)
strRawContents = strRawContents.replace("\r", "");
var arrLines = strRawContents.split("\n");
alert("File " + oFrame.src + " has " + arrLines.length + " lines");
for (var i = 0; i < arrLines.length; i++) {
var curLine = arrLines[i];
alert("Line #" + (i + 1) + " is: '" + curLine + "'");
}
}
</script>
注意：为了使其在 Chrome 浏览器中工作，您应该使用--allow-file-access-from-files标志启动它。信用。
加载那个巨大的数据块并不是一个很好的计划，但如果你必须这样做，这里是你可以如何使用jQuery$.ajax()函数来完成它的大纲。
<html><head>
<script src="jquery.js"></script>
<script>
getTxt = function (){
$.ajax({
url:'text.txt',
success: function (data){
//parse your data here
//you can split into lines using data.split('\n')
//an use regex functions to effectively parse it
}
});
}
</script>
</head><body>
<button type="button" id="btnGetTxt" onclick="getTxt()">Get Text</button>
</body></html>
您需要使用 Ajax，它基本上是向服务器发送请求，然后获取一个 JSON 对象，然后将其转换为 JavaScript 对象。
检查这个：
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
如果您使用的是 jQuery 库，它会更容易：
http://api.jquery.com/jQuery.ajax/
话虽如此，我强烈建议您不要将 3.5MB 的文件下载到 JS 中！这不是一个好主意。在您的服务器上进行处理，然后在处理后返回数据。然后如果你想得到一个新的数据，发送一个新的 Ajax 请求，在服务器上处理这个请求，然后返回新的数据。
希望有帮助。
我使用了 Rafid 的使用 AJAX 的建议。
这对我有用：
var url = "http://www.example.com/file.json";
var jsonFile = new XMLHttpRequest();
jsonFile.open("GET",url,true);
jsonFile.send();
jsonFile.onreadystatechange = function() {
if (jsonFile.readyState== 4 && jsonFile.status == 200) {
document.getElementById("id-of-element").innerHTML = jsonFile.responseText;
}
}
我基本上（几乎是字面意思）从http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_get2复制了这段代码，所以一切都归功于他们。
我对它的工作原理知之甚少，但您不必知道您的制动器如何工作才能使用它们；)
希望这可以帮助！
看起来XMLHttpRequest已经被Fetch API取代了。谷歌发布了一个很好的介绍，包括这个例子做你想做的事：
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
但是，您可能想要调用response.text()而不是response.json().
其它你可能感兴趣的问题