我有一个简单的 node.js 应用程序，它显示存储在 SQLite 数据库中的用户登录信息，每行内都有一个单选按钮。当用户选择一条记录并单击删除按钮时，应删除相应的记录。
问题似乎是我无法弄清楚如何返回所选单选按钮的值，它们都显示为“未定义”。我尝试了很多不同的方法，却一直在兜圈子。感谢帮助!
编辑:我认为问题在于我对所有内容都使用一种 GET 方法，因此 req.body 为空。但不知道如何解决它!
var express = require('express');
var app = express();
var bodyParser = require("body-parser")
var path = require('path');
var sqlite3 = require("sqlite3").verbose();
// Open persistent file database "loginDB"
let db = new sqlite3.Database('./loginDB', sqlite3.OPEN_READWRITE, (err) => {
if (err) {
console.error(err.message);
}
console.log('Connected to the user database.');
});
// Route files in public
app.use(express.static('public'));
// Configure to use body-parser
app.use(bodyParser.urlencoded({extended: false}));
// Function to check if radio button is selected
function checkSelected(item) {
return item != "undefined";
}
// Function to identify ID of record selected for deletion
function getSelected(selections) {
var userID = selections.findIndex(checkSelected);
return userID;
}
// REST endpoint for displaying data
app.get("/delete", function(req, res, next) {
var radioArray = [];
// Query database to retrieve records
db.all(`SELECT * FROM UserLogin`, function(err, rows) {
if (err) {
console.error(err.message);
};
// Generate table with user data
res.write('<html><head>');
res.write('<meta charset="utf-8">');
res.write('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">');
res.write('<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>');
res.write("</head><body>");
res.write("<h2> The User Information Table</h2><br>");
res.write("<table class = 'table table-bordered table-striped'><thead><tr>");
res.write("<strong><th> </th>");
res.write("<th>ID</th>");
res.write("<th>Username</th>");
res.write("<th>Password</th></strong></tr></thead><tbody>");
rows.forEach(function(row) {
res.write(`<tr><td><input type='radio' value='${row.ID}' id='optradio' name='optradio'></td><td>` +row.ID+ `</td><td>` +row.Username+ `</td><td>` +row.Password+ `</td></tr>`);
radioArray.push(req.body.optradio);
});
res.write("</tbody></table></body></html><br>");
res.write(`<button class="btn btn-default" type="submit" value="delete" class="btn btn-primary">Delete</button>`);
var whichRadio = getSelected(radioArray);
db.run(`DELETE FROM UserLogin WHERE ID = ?`, whichRadio, function(err) {
if (err) {
return console.error(err.message);
} console.log("Deleted ID " + whichRadio);
});
res.send();
});
});
app.listen(3000, function() {
console.log("Web server running at: http://localhost:3000");
console.log("Type Ctrl+C to shut down the web server");
});
最佳答案
我发布了我的问题的答案，以帮助其他人解决同样的问题。添加表单标签并设置单独的 POST 方法使我能够摆脱用于尝试检索单选按钮值的凌乱代码，因此最终结果更加整洁。
var express = require('express');
var app = express();
var bodyParser = require("body-parser")
var path = require('path');
var sqlite3 = require("sqlite3").verbose();
// Open persistent file database "loginDB"
let db = new sqlite3.Database('./loginDB', sqlite3.OPEN_READWRITE, (err) => {
if (err) {
console.error(err.message);
}
console.log('Connected to the user database.');
});
db.serialize(function() {
db.run(`SELECT * FROM UserLogin`);
});
// Route files in public
app.use(express.static('public'));
// Configure to use body-parser
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
// REST endpoint for displaying data
app.get("/delete", function(req, res, next) {
// Query database to retrieve records
db.all(`SELECT * FROM UserLogin`, function(err, rows) {
if (err) {
console.error(err.message);
};
// Generate table with user data
res.write('<html><head>');
res.write('<meta charset="utf-8">');
res.write('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">');
res.write('<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>');
res.write("</head><body>");
res.write("<h2> The User Information Table</h2><br>");
res.write(`<form id="deleteUserForm" action="/inputForm" method="POST"</form>`);
res.write("<table class='table table-bordered table-striped'><thead><tr><strong>");
res.write("<th> </th>");
res.write("<th>ID</th>");
res.write("<th>Username</th>");
res.write("<th>Password</th></strong></tr></thead><tbody>");
rows.forEach(function(row) {
res.write(`<tr><td><input type='radio' form="deleteUserForm" value='${row.ID}' id='optradio' name='optradio'></td><td>` +row.ID+ `</td><td>` +row.Username+ `</td><td>` +row.Password+ `</td></tr>`);
});
res.write("</tbody></table><br>");
res.write(`<button class="btn btn-default" type="submit" form="deleteUserForm" value="delete" class="btn btn-primary">Delete</button>`);
res.write(`</body></html>`);
res.send();
});
});
// REST endpoint for getting value of selected record ID and deleting the user
app.post('/inputForm', function(req, res) {
//res.send(req.body.optradio);
var userToDelete = req.body.optradio;
db.run(`DELETE FROM UserLogin WHERE ID = ?`, userToDelete, function(err) {
if (err) {
return console.error(err.message);
} res.redirect('/delete'); //Redirect to user information page
});
});
app.listen(3000, function() {
console.log("Web server running at: http://localhost:3000");
console.log("Type Ctrl+C to shut down the web server");
});
关于javascript - Node.js 基于单选按钮选择从 SQLite 数据库中删除记录，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50508744/