将HTML表数据插入节点js中的mysql数据库中

Question

我正在尝试从html表中检索数据并将其插入MySQL数据库。 我已经可以进行相反的操作，即从数据库中检索信息，并使用ejs模板将其显示在同一表中。 我也可以将原始/ JSON数据插入MySQL，但是由于无法从服务器端引用该表，因此无法从同一表提取数据（主体解析器对表单数据的处理方式相同）。

我已经在网上搜索过，所有教程都只是使用json数据插入数据库，没有人首先从html表中检索数据。

通过下面的代码，我可以使用纯JavaScript遍历表数据。

var table = document.getElementById('vehiclesTB');
for (var i = 1; i < table.rows.length; i++) {
  if (table.rows[i].cells.length) {
    var vehicleTag = (table.rows[i].cells[0].textContent.trim());    
  }
}

如何将检索数据从html表传递到控制器（服务器端）？ 我无法直接从服务器文件（app.js）引用html表。

我的app.js文件：

var express = require('express')
  , routes = require('./routes')
  , controls = require('./routes/controls')
  , http = require('http')
  , path = require('path');
var app = express();
var mysql = require('mysql');
var bodyParser =require("body-parser");
var pool = mysql.createConnection({
    connectionLimit: 100,
    host: 'localhost',
    database: 'vehicluster',
    user: 'motor',
    password: '',
    debug: false  
});

pool.connect();



// all environments
app.set('port', process.env.PORT || 8080);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'public')));

app.post('/vehicle', controls.vehicle);
//Middleware
app.listen(8080)

我的controls.js文件。

exports.vehicle = function(req, res){                   
var table = document.getElementById('vehiclesTB');//how to read this 
table in ejs
for (var i = 1; i < table.rows.length; i++) {
if (table.rows[i].cells.length) {
var vehicleTag = (table.rows[i].cells[0].textContent.trim());
var vehicleMake = (table.rows[i].cells[1].textContent.trim());
var vehicleModel = (table.rows[i].cells[2].textContent.trim());
var price = (table.rows[i].cells[3].textContent.trim());
var quantity = (table.rows[i].cells[4].textContent.trim());                
     }
}

var sql = 'insert into Vehicle(make, model, price, quantity) values 
(?,?,?,?,?)';
pool.query(sql,[vehicleMake, vehicleModel, price, quantity], 
(err,data)=>{
if(err){
    console.log(err);            
    return
 }else{
    console.log(data);                        
     }      
 };

HTML表显示相关项目（表），将表数据放入mysql数据库。 我已经可以检索到表了：

<div style="overflow-x: auto;">                       
    <table id="customers">
        <tbody id="mytbody">
            <tr>                                  
                <th>Make</th> 
                <th>Model</th>
                <th>price</th>
                <th>quantity</th>                                                                   
            </tr>
            <tr>
                <th>toyota</th> 
                <th>camry</th>
                <th>200</th>
                <th>5</th>                                     
            </tr>
            <tr>
                <th>honda</th> 
                <th>civic</th>
                <th>400</th>
                <th>7</th>                                     
            </tr>
        </tbody>
    </table>                            
</div>

如您所料，我收到错误，getElementById是客户端，值为空，等等，数据库未更新。 在线上的大多数教程都显示了相反的情况，即将数据库值插入html表，而不是相反。 任何有关实际表示例/路由的帮助将不胜感激。

Answer 1

如果需要在服务器上提供客户端HTML表，则需要在服务器上添加ajax端点和代码以发送HTML数据（请参见axios库）。

我不确定您的用例，因为自从您渲染之后，客户端的数据似乎应该已经在服务器上可用。 它可能不是HTML格式，但数据应该存在于其中。 除非您当然是从其他来源获得HTML表（或者也许这只是HTML解析中的一个练习？）。

---

这是一个更新，以显示如何使用axios。 请注意，尽管您仍然需要研究该库以了解如何处理错误，或者即使成功后还需要执行其他操作。

在您的前端：

var table = document.getElementById('vehiclesTB');
var postBody = [];
for (var i = 1; i < table.rows.length; i++) {
  if (table.rows[i].cells.length) {
    var vehicle = {
      vehicleTag: (table.rows[i].cells[0].textContent.trim())
      vehicleMake: (table.rows[i].cells[1].textContent.trim()),
      vehicleModel: (table.rows[i].cells[2].textContent.trim()),
      price: (table.rows[i].cells[3].textContent.trim()),
      quantity: (table.rows[i].cells[4].textContent.trim())
    }
    postBody.push(vehicle);
  }

}

axios({ // should add error handling as appropriate
  method: 'post',
  url: '/vehicle',
  data: postBody
});

然后在服务器端，修改您的controls.js：

exports.vehicle = function(req, res) {
  var table = req.body; // assumes you have used bodyparser middleware to parse JSON into an object
  for (var i = 1; i < table.length; i++) {
    var vehicle = table[i];
    var sql = 'insert into Vehicle(make, model, price, quantity) values ( ? , ? , ? , ? , ? )';
    pool.query(sql, [vehicle.vehicleMake, vehicle.vehicleModel, vehicle.price, vehicle.quantity],
      (err, data) => {
        if (err) {
          console.log(err);
          return
        } else {
          console.log(data);
        }
      });
  }
};

另外，我建议您查看Array.forEach以查看数组，而不要查看所使用的for循环方法（请参阅MDN文档）