如何将数据从文本文件加载到 html 表中答案

【问题标题】：How to load the data into html table from a text file如何将数据从文本文件加载到 html 表中
【发布时间】：2015-10-08 04:05:30
【问题描述】：

我正在尝试将 upload.txt 记录显示到 html 表中。

upload.txt 文件位于此网址：http://localhost:3000/upload。当我们调用这个 url 时，它会得到 upload.txt 文件。

其实我在这里使用的是node.js。所以我在这里路由是这样的：

app.get('/upload', function(req, res) {
  res.sendfile('views/upload.txt');
});

我的上传文件：

client_ip
1.0.230.145
1.1.145.219
1.1.214.239
1.11.112.100
1.112.218.165
1.112.98.44
1.113.55.77
1.114.193.160
1.115.77.221
1.115.81.190
1.124.150.22
1.124.158.81

我的table.html：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color:#FFBD0C;
}


table {
    border-collapse:separate;
    border-spacing:1px;
    background:#CCC;
        margin-right:200px
    }

table th {
        background:#EEE;
        font-weight:600;
        padding:10px 20px;
        text-align:center;
    }

table tbody {
        padding:0; margin:0;
        border-collapse:collapse;
        border-spacing:0px;
    }
table td {
          background:#C7DBED;
          padding:5px 10px;
          text-align:center;
    }


</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
<script>
var userListData = [];

$(document).ready(function() {

    populateTable();

});

function populateTable() {

    var tableContent = '';


    $.get( 'http://localhost:3000/upload', function( data ) {

      alert(data); // Here I'm able to get the entire text file data.
        $.each(data, function(){
           alert(data); // here I'm unable to get the data.
            tableContent += '<tr>';
            tableContent += '<td>' + this.client_ip + '</td>';
            tableContent += '</tr>';
        });


        $('#tablediv').html(tableContent);
    });
};

</script>
</head>
<body>
<h2 style="color:brown; margin-left:490px;margin-top:150px;">Upload Clients</h2>
<table  width="60%" id="tab" style="margin-left:200px;">
  <thead>
  <tr>
    <th>Clients</th>
  </tr>
<thead>
<tbody id="tablediv">
</tbody>
</table>

</body>
</html>

此时，我们如何将client_ip值加载到表中。

function populateTable() {

    var tableContent = '';


    $.get( 'http://localhost:3000/upload', function( data ) {

      alert(data);
        $.each(data, function(){
            tableContent += '<tr>';
            tableContent += '<td>' + this.client_ip + '</td>';
            tableContent += '</tr>';
        });


        $('#tablediv').html(tableContent);
    });
};

实际上我无法将数据加载到 html 表中。谁能帮我解决这个问题。

【问题讨论】：

本地主机链接无法在线使用...请勿在此处发布！
您的网址在$.get 中显示http://localhost:3000/upload。您不应该指定完整的url 并带有$.get('http://localhost:3000/upload.txt'... 之类的扩展名吗？
实际上我在我的代码中使用 node.js。我想说的是，如果假设文本文件在服务器中的一个 url，那么如何将文本文件数据加载到html 表格。
如果您的上传目录是http://localhost:3000/upload，您想从脚本中的http://localhost:3000/uploadcsv 读取什么
您的$.each 将无法正常工作。一旦您收到data 作为响应，请尝试在控制台中使用console.log(data) 进行日志记录，看看它是如何获得的

标签： jquery html ajax

【解决方案1】：

您不是要逐行读取文件，而是尝试以下操作：

function populateTable() {

    var tableContent = '';


    $.get( 'http://localhost:3000/upload', function( data ) {

      alert(data);
      //this will split the string into array line by line
      var lineByline = data.split('\n');
        //here we're itraing the array which you've created and printing the values
        $.each(lineByline , function(key,value){
            tableContent += '<tr>';
            tableContent += '<td>' + value + '</td>';
            tableContent += '</tr>';
        });

        $('#tablediv').html(tableContent);
    });
};

为了提高效率，您可以尝试分块加载文件，例如：

    //telling your ajax to read only some amount of data
    // you have to use this in recursion to get the entire data 
    // just add this before you call $.get(..)
    $.ajaxSetup({ beforeSend : function(xhr) {
       xhr.setRequestHeader("Range", "bytes=0-2800" );
    }});

【讨论】：

通过此代码，我可以显示一个表格，但行中填充了从零开始的数字。我想在表格中显示 client_ip 而不是数字。
是的，现在它工作正常。非常感谢您的信息。但是加载client_ip需要时间。实际上我在upload.txt文件中有近68000条记录
使用 $.ajaxSetup 代码后，我只能在该范围内获取 client_ip。如何最终组合所有块以显示所有 client_ip。我们能否保持动态范围而不是使用静态范围
@GangiguntaDivya 在上面使用recursion，你应该得到所有数据
很好。非常感谢。

【解决方案2】：

第一个问题似乎是 ajax 请求找不到资源。 ajax 源 URL 缺少文件扩展名。 IE。 "http://localhost:3000/upload"

获取数据。添加文件扩展名后，您实施的警报会随数据一起弹出。但他的问题似乎在于 $.each 循环

您可以使用以下函数更新您的 populateTable 函数

function populateTable() {

    var tableContent = '';

    $.get('http://localhost:3000/upload.txt', function(data) {
       alert(data);
       $('#tablediv').html(data.replace('n',''));
    });
};

【讨论】：

【解决方案3】：

DEMO

我假设您以string 取回它。然后你需要splitstring基于space字符然后循环它，还需要避免第一个字符串client_ip

var ips=data.split(' ');
var tableContent;
$.each(ips, function(key,value){
    if(key==0) //do not display client_ip which is first string
        return;
    tableContent += '<tr>';
    tableContent += '<td>' + value + '</td>';
    tableContent += '</tr>';

});
$('table').html(tableContent);

【讨论】：

【解决方案4】：

对我之前的回答进行了一些更新

这将最大限度地满足您的要求

function populateTable() {

    var tableContent = '';


    $.get( 'http://localhost:3000/upload.txt', function( data ) {

      alert(data);
      var lineByline = data.split('\n')
        $.each(lineByline , function(index,value){
            tableContent += '<tr>';
            tableContent += '<td>' + value + '</td>';
            tableContent += '</tr>';
        });


        $('#tablediv').html(tableContent);
    });
};

【讨论】：