JS＆NodeJs：使用AJAX从DB读取表格并显示在表格中
我正在与NodeJS的项目工作，我想用AJAX从我的MySQL数据库读取，然后在HTML表中显示DB表行。
我想我有一个问题，就是如何处理/存储数据，一旦我从数据库中取出数据。
这里是我的数据库（当然是完全虚构的数据）的结构，到目前为止我的代码：
这里是我得到的，如果我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>
你的行数据实际上是对象的数组：
[ { 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); }
所以，你不需要把它推入一个数组来访问它。 更好的传递是直接和访问如下：
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>'); } });
此外 ，如果您将内容types设置为JSON会更好：
response.writeHead(200, {'Content-Type': 'application/json'});
这样你就不必在index.html（客户端）parsing它。