JS 和 Node Js：使用 AJAX 从 DB 中读取表格并显示在表格中答案

【问题标题】：JS & NodeJs: Read table from DB with AJAX and display in tableJS 和 Node Js：使用 AJAX 从 DB 中读取表格并显示在表格中
【发布时间】：2017-03-08 14:46:09
【问题描述】：

我正在使用 NodeJS 进行项目，我正在尝试使用 AJAX 从我的 MySQL 数据库中读取数据，然后在 HTML 表中显示数据库表行。

我认为从数据库中取出数据后如何处理/存储数据存在问题。

这是我的数据库的结构（当然是完全虚构的数据），以及到目前为止的代码：

如果我使用 console.log(serverData);在我看来，我的数据应该位于某种嵌套数组或某种结构中，以便我识别正在访问的数组中的值。

server.js

var http = require('http');
var fs = require('fs');
var mysql = require('mysql');
var url = require('url');
var mime = require('mime');
var config = JSON.parse(fs.readFileSync('config.json'));
var host = config.host;
var port = config.port;

var connection = mysql.createConnection({
  host      : 'localhost',
  user      : 'root',
  password  : 'root',
  database  : 'innovation_one'
});
function connectToDb(){
  connection.connect(function(err){
    if (err){
      console.log('error: ' + err.stack);
      return;
    }
    return console.log('Connected established!');
  });
}

var server = http.createServer(function(request,response){
  var parsed = url.parse(request.url);
  var mimetypeLookup = mime.lookup(request.url);
  if(request.method == "POST") {
// POST
  } else if (request.method == "GET") {
// GET
if (request.url == '/get-servers/'){
  connectToDb();
  connection.query('SELECT * FROM servers', function(err,rows,fields)    {
    if (err) {
      console.log(err);
      return
    }
    var data = [];
    for( i = 0 ; i < rows.length ; i++){

      data.push(rows[i].name);
      data.push(rows[i].client);
      data.push(rows[i].type);
      data.push(rows[i].host);
      data.push(rows[i].ssh);
      data.push(rows[i].mysql);

    }
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end(JSON.stringify(data,fields));
      });
    }
  }
}).listen(port, host);

console.log('Server running at http://127.0.0.1:4114/');

index.html

<!DOCTYPE html>
<head>
<title>Home | Innovation One</title>
<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <h1>Dev sheet dashboard</h1>
  <button id="getServers">Get servers</button>
  <table id="servers">
    <thead>
      <tr>
        <th width="150">Server name</th>
        <th width="150">Client</th>
        <th width="150">Type</th>
        <th width="150">Host</th>
        <th width="150">SSH</th>
        <th width="150">MySQL</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <div class="log"></div>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
      // Code here
      $('button#getServers').on('click',function(){

        var jqxhr = $.get('/get-servers/', function(data,fields) {
        var serverData = JSON.parse(data);
        console.log(serverData);
          var rows = serverData.length / (fields.length - 1);

          for (i=0 ; i < rows ; i++){
            $('#servers tbody').append('<tr>            <td>'+serverData[i]+'</td><td>'+serverData[i]+'</td>    <td>'+serverData[i]+'</td><td>'+serverData[i]+'</td><td>'+serverData[i]+'</td><td>'+serverData[i]+'</td></tr>');
          }
        });


      });
  });
  </script>
  <script type="text/javascript" src="js/script.js" />
</body>

【问题讨论】：

标签： javascript mysql ajax node.js loops

【解决方案1】：

您的行数据实际上是对象数组：

[
    {
        name:'super_company',
        client: 'Super Co Ltd',
        type:'staging',
        host:'156.34.567.34',
        ssh:'gerbguiberug',
        mysql:'49thgrekver'
    },
    {

    },...
]

简单地遍历数组以获取单个对象，然后简单地提取它的属性，或者使用for in 循环或for each 循环。

示例：

for (i=0 ; i < rows.length ; i++){
    var row = rows[i];
    console.log(row.name);
    console.log(row.client);
    console.log(row.type);
    console.log(row.host);
    console.log(row.ssh);
    console.log(row.mysql);
}

因此，您无需将其推送到数组中即可访问它。 较好的pass是直接访问如下：

server.js：

connection.query('SELECT * FROM servers', function(err,rows,fields)    {
    if (err) {
      console.log(err);
      return
    }
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end(JSON.stringify(rows));
});

index.html：

$.get('/get-servers/', function(data,fields) {
    var rows = JSON.parse(data);
    for (i=0 ; i < rows.length ; i++){
        var row = rows[i];
        $('#servers tbody').append('<tr><td>'+row.name+'</td><td>'+row.client+'</td><td>'+row.type+'</td><td>'+row.host+'</td><td>'+row.ssh+'</td><td>'+row.mysql+'</td></tr>');
    }
});

加法如果将内容类型设置为 JSON 会更好：

response.writeHead(200, {'Content-Type': 'application/json'});

这样您就不必在 index.html（客户端）中解析它。

【讨论】：

嘿尼维什，谢谢您的回复。我会在接下来的几个小时内测试你的回复，然后告诉你进展如何。但你的回复看起来很有希望:)。
嘿 Nivesh，这一切都很好，谢谢！唯一的问题是当我将“Content-Type”设置为“application/json”时，我会在控制台“Unexpected token o in JSON at position 1”中得到这个响应。你会碰巧知道如何解决这个问题吗？再次感谢您的回答。我知道只需要确保我理解你做了什么。其实我可以问你为什么在“index.html file”中有这行“var row = rows[i];”吗？谢谢。
你有一个数组中的对象列表，要访问一个特定的对象，你需要做var obj = array_obj[0]它将访问第0个索引对象，现在要进一步访问它的属性，你可以做obj.prop_name
您的数据已经被解析，因此在这种情况下无需解析参考：stackoverflow.com/a/33489715/2680461