Woo*_*ody 34 javascript ajax file-io
在服务器上,有一个文本文件.在客户端上使用JavaScript,我希望能够读取此文件并进行处理.无法更改服务器上文件的格式.
如何将文件的内容转换为JavaScript变量,以便进行此处理？文件的大小最大可达3.5 MB,但它可以很容易地处理成100行(1行是50-100个字符串).
该文件的所有内容都不应对用户可见; 他将看到文件中数据处理的结果.
Sha*_*ard 32
您可以使用隐藏框架,在其中加载文件并解析其内容.
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标志启动它.信用.
Amj*_*sad 13
加载那一大块数据并不是一个很好的计划,但是如果必须的话,这里有一个如何使用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>
Raf*_*fid 10
您需要使用Ajax,它基本上是向服务器发送请求,然后获取一个JSON对象,您将其转换为JavaScript对象.
检查一下:
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
如果您使用的是jQuery库,它可能更容易:
http://api.jquery.com/jQuery.ajax/
话虽如此,我强烈建议您不要将3.5MB的文件下载到JS中!这不是一个好主意.在服务器上进行处理,然后在处理后返回数据.然后,如果要获取新数据,请发送新的Ajax请求,在服务器上处理请求,然后返回新数据.
希望有所帮助.
我使用了拉菲德关于使用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().