更新:你们中的许多人都对文件存储方式感到好奇。它是我们文件服务器上的静态网页(
table.html
)。文本文件(data.txt
)将在同一目录中。table.html
)。文本文件(data.txt
)将在同一目录中。我最近完成了一个项目,几乎和你的条件完全一样(唯一的区别是用户专门使用IE)。
最终我使用了JQuery的$.ajax()
函数,并从XML文件中提取数据。
这个解决方案需要使用Microsoft Access或Excel。我使用的是早期的2003版本,但后来的版本也可以正常工作。
我的数据保存在Access表格中(在Excel中我使用了列表)。一旦你在Access中创建了你的表格,只需点击“导出”,将其保存为XML,然后玩弄你的“ajax()”函数(http://api.jquery.com/jQuery.ajax/)以操纵你想要输出的数据,然后使用CSS/HTML来布局你的页面。
我建议使用Access,因为它不需要太多麻烦就可以正确地导出XML,虽然Excel需要更多的调整。
以下是使用ms-access的步骤:
在access中创建表格并导出为XML
生成的XML将如下所示:
<?xml version="1.0" encoding="UTF-8"?>
<dataroot xmlns:od="urn:schemas-microsoft-com:officedata" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="Calls.xsd" generated="2013-08-12T19:35:13">
<Calls>
<CallID>1</CallID>
<Advisor>Jenna</Advisor>
<AHT>125</AHT>
<Wrap>13</Wrap>
<Idle>6</Idle>
</Calls>
<Calls>
<CallID>3</CallID>
<Advisor>Edward</Advisor>
<AHT>90</AHT>
<Wrap>2</Wrap>
<Idle>4</Idle>
</Calls>
<Calls>
<CallID>2</CallID>
<Advisor>Matt</Advisor>
<AHT>246</AHT>
<Wrap>11</Wrap>
<Idle>5</Idle>
</Calls>
示例 HTML
<table id="doclib">
<tr><th>Name</th><th>AHT</th><th>Wrap</th><th>Idle</th></tr>
</table>
jQuery:
$(document).ready(function(){
$.ajax({
type: "GET",
url: "Calls.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Calls').each(function(){
var advisor = $(this).find('Advisor').text(),
aht = $(this).find('AHT').text(),
wrap = $(this).find('Wrap').text(),
idle = $(this).find('Idle').text(),
td = "<td>",
tdc = "</td>";
$('#doclib').append("<tr>" +
td + advisor + tdc + td + aht + tdc + td + wrap + tdc + td + idle + tdc + "</tr>")
});
}
});
});
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer
我个人从未使其完全正常运作,但它应该能够允许这种事情发生。
听起来你只是想从服务器获取静态文件的内容,是吗?如果这就是你需要做的事情,那么你很幸运。这非常容易。
load('textTable.txt', function(err, text) {
buildTable(text);
});
function load(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState < 4) return;
if (xhr.status !== 200) {
return callback('HTTP Status ' + xhr.status);
}
if (xhr.readyState === 4) {
callback(null, xhr.responseText);
}
};
xhr.open('GET', url, true);
xhr.send('');
}
如果你选择 qwest,它会看起来像这样:
qwest.get('textTable.txt').success(function(text) {
buildTable(text);
});
使用jQuery:
jQuery.get('textTable.txt', function(text) {
buildTable(text);
});
XMLHttpRequest()
只能在IE上使用吗? - Jacob Bridges由于安全原因,JavaScript 无法自动读取文件。
您有两个选择:
如果您可以依赖于使用 IE,则可以使用一些花哨的 ActiveX 工具。
使用后端,该后端可以不断向 JS 客户端推送数据或在拉取请求时提供数据。
如果你有一个使用Node.js、PHP等构建的服务器,这个方法可能会起作用。
JavaScript可以通过Ajax协议读取文件,但这意味着你需要一个服务器。
否则,你的请求将通过file://协议进行,而该协议不支持Ajax。
在IE 5或IE 6中尝试使用XMLHttpRequest或ActiveXObject。
在这里,您可以找到一个解释:
http://www.w3schools.com/xml/xml_http.asp
或者尝试这个例子:
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first