ajax 读取 .csv 文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>CSV形式のデータを読み込み表示する</h1>
<div id="tableData">データを読み込み中....</div>
</body>
</html>


window.onload = function(){
var msec = (new Date()).getTime();
new Ajax.Request("data.csv", {
method: "get",
parameters: "cache="+msec,
onSuccess:function(httpObj){
var text = httpObj.responseText;
var LF = String.fromCharCode(10);
var tabText = text.split(LF);
var tbl = "<table border='1'>";
for (var i=0; i<tabText.length; i++){
var cText = tabText[i].split(",");
tbl += "<tr>";
for (var j=0; j<cText.length; j++){
tbl += "<td>"+cText[j]+"</td>";
}
tbl +="</tr>";
}
tbl += "</table>";
$("tableData").innerHTML = tbl;
},
onFailure:function(httpObj){
$("tableData").innerHTML = "エラーで読み込めませんでした";
}
});
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端可以通过以下步骤来读取CSV文件: 1. 通过`<input type="file">`标签让用户选择要上传的CSV文件。 2. 通过File API中的FileReader对象读取CSV文件内容。 3. 将CSV文件内容解析为数组或对象,可以使用JavaScript库如Papa Parse或D3.js等。 4. 对读取到的数据进行处理和展示。 以下是一个简单的示例代码,使用Papa Parse库读取CSV文件并将数据展示在表格中: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>读取CSV文件</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script> </head> <body> <input type="file" id="csv-file" accept=".csv"> <br><br> <table id="data-table"></table> <script> document.getElementById('csv-file').addEventListener('change', handleFileSelect, false); function handleFileSelect(event) { var file = event.target.files[0]; Papa.parse(file, { header: true, dynamicTyping: true, complete: function(results) { showData(results.data); } }); } function showData(data) { var table = document.getElementById('data-table'); var html = '<tr><th>' + Object.keys(data[0]).join('</th><th>') + '</th></tr>'; for (var i = 0; i < data.length; i++) { html += '<tr><td>' + Object.values(data[i]).join('</td><td>') + '</td></tr>'; } table.innerHTML = html; } </script> </body> </html> ``` 这段代码监听了文件上传的事件,读取CSV文件内容,并将数据展示在表格中。需要注意的是,这里使用了Papa Parse库来解析CSV文件,并且设置了`header`和`dynamicTyping`选项来解析表头和数据类型。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值