Question

我正在尝试将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');
});

我的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表中。任何人都可以帮我解决这个问题。

Answer 1

第一个问题似乎是ajax请求无法找到资源。 ajax源URL缺少文件扩展名。即 “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',''));
    });
};

Answer 2

你不是试图逐行阅读文件而是试着这样做：

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" );
    }});

Answer 3

<强> DEMO

我假设您将其作为string取回。然后，您需要基于split字符string 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);

Answer 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);
    });
};

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

4 个答案: