如何从记录集中获取数据到 html div
Posted
技术标签:
【中文标题】如何从记录集中获取数据到 html div【英文标题】：How to fetch data from recordset to html div 【发布时间】：2020-10-19 17:48:41 【问题描述】：我正在尝试制作一个库存管理器来跟踪各种捕鱼设备。我目前能够使用 html 表单将数据输入到 SQL 服务器数据库。我正在尝试将 select 语句中的数据加载到 index.html 页面上的 div 中。我正在使用 node js 和 express 来允许 html 与 SQL 服务器对话。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fishing Inventory</title>
</head>
<body>
<div class="navbar">
<a href="AddPerson.html">Add New Person</a>
<a href="AddHook.html">Add New Hook</a>
<a href="AddSoftPlastic.html">Add New Soft Plastic</a>
<a href="AddRod.html">Add New Rod</a>
<a href="AddReel.html">Add New Reel</a>
<a href="AddLine.html">Add New Line</a>
<a id="SeeHooks">See Hooks</a>
<a id="SeeSP">See Soft Plastics</a>
<a id="SeeRods">See Rods</a>
<a id="SeeReels">See Reels</a>
<a id="SeeLine">See Line</a>
</div>
<div class="mainHeader">
<h1>Fishing Inventory Manager</h1>
</div>
<div class="DBcontainer">
<form action="/" method="POST">
/* On button click, I want the recordSet to be displayed in this div */
<input type="submit" value="Submit"></input>
</form>
</div>
</body>
</html>
<style>
body
background-color: black;
h1
text-align: center;
color: white;
/* The navigation bar */
.navbar
overflow: hidden;
background-color: #333;
position: fixed;
/* Set the navbar to fixed position */
top: 0;
/* Position the navbar at the top of the page */
width: 100%;
/* Full width */
/* Links inside the navbar */
.navbar a
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
/* Change background on mouse-over */
.navbar a:hover
background: #ddd;
color: black;
/* Main content */
.main
margin-top: 30px;
/* Add a top margin to avoid content overlay */
.mainHeader
position: relative;
line-height: 30px;
margin-top: 50px;
.DBcontainer
background-color: white;
margin: auto;
width: 80%;
line-height: 100%;
margin-top: 30px;
border: 3px solid black;
padding: 0px;
text-align: center;
.button
text-align: center;
.center
margin-left: auto;
margin-right: auto;
table,
th,
td
border: 1px solid black;
</style>
server.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var sql = require('mssql');
app.use(bodyParser.urlencoded( extended: true ));
app.use(express.static(__dirname)); //__dir and not _dir
var port = 8000; // you can use any port
app.listen(port);
console.log('server on ' + port);
var config =
server: "localhost",
database: "FishingInventory",
user: "root",
password: "",
port: 1433
;
app.post('/hook', function (req, res)
var conn = new sql.Connection(config);
var requ = new sql.Request(conn);
var hookCompany = req.body.Hook_Company;
var hookSize = req.body.Hook_Size;
var hookType = req.body.Hook_Type;
conn.connect(function (err)
if (err)
console.log(err);
return;
var sql = "INSERT INTO hooks (company, size, hook_type) VALUES ('" + hookCompany + "', '" + hookSize + "', '" + hookType + "')";
requ.query(sql, function (err, recordset)
if (err)
console.log(err)
else
res.send('Records were updated');
);
conn.close();
);
);
app.post('/SP', function (req, res)
var conn = new sql.Connection(config);
var requ = new sql.Request(conn);
var SPCompany = req.body.SP_Company;
var SPSize = req.body.SP_Color;
var SPType = req.body.SP_Type;
conn.connect(function (err)
if (err)
console.log(err);
return;
var sql = "INSERT INTO soft_plastics (company, size, sp_type) VALUES ('" + SPCompany + "', '" + SPSize + "', '" + SPType + "')";
requ.query(sql, function (err, recordset)
if (err)
console.log(err)
else
res.send('Records were updated');
);
conn.close();
);
);
app.post('/reel', function (req, res)
var conn = new sql.Connection(config);
var requ = new sql.Request(conn);
var reelCompany = req.body.Reel_Company;
var reelSize = req.body.Reel_Size;
conn.connect(function (err)
if (err)
console.log(err);
return;
var sql = "INSERT INTO reels (company, size) VALUES ('" + reelCompany + "', '" + reelSize + "')";
requ.query(sql, function (err, recordset)
if (err)
console.log(err)
else
res.send('Records were updated');
);
conn.close();
);
);
app.post('/line', function (req, res)
var conn = new sql.Connection(config);
var requ = new sql.Request(conn);
var lineCompany = req.body.Line_Company;
var lineSize = req.body.Line_ibTest;
conn.connect(function (err)
if (err)
console.log(err);
return;
var sql = "INSERT INTO line (company, ib_test) VALUES ('" + lineCompany + "', '" + lineSize + "')";
requ.query(sql, function (err, recordset)
if (err)
console.log(err)
else
res.send('Records were updated');
);
conn.close();
);
);
app.post('/rod', function (req, res)
var conn = new sql.Connection(config);
var requ = new sql.Request(conn);
var RodCompany = req.body.Rod_Company;
var RodFeet = req.body.Rod_Feet;
var RodInches = req.body.Rod_Inches;
var reelID = req.body.Reel_ID;
var lineID = req.body.Line_ID;
conn.connect(function (err)
if (err)
console.log(err);
return;
var sql = "INSERT INTO rods (company, feet, inches, reel_id, line_id)" +
"VALUES ('" + RodCompany + "', '" + RodFeet + "', '"+ RodInches +"', '"+ reelID +"', '"+ lineID +"')";
requ.query(sql, function (err, recordset)
if (err)
console.log(err)
else
res.send('Records were updated');
);
conn.close();
);
);
app.post('/person', function (req, res)
var FirstName = req.body.Fname;
var LastName = req.body.Lname;
var HooksID = req.body.Hooks_ID;
var SoftPlasticsID = req.body.Soft_Plastics_ID;
var RodID = req.body.Rods_ID;
var numOfHooks = req.body.Num_Of_hooks;
var numOfSoftPlastics = req.body.Num_OF_Soft_Plastics;
conn.connect(function (err)
if (err)
console.log(err);
return;
var sql = "INSERT INTO person (first_name, last_name, hooks_id, sp_id, rods_id, num_hooks, num_sp)" +
"VALUES ('" + FirstName + "', '" + LastName + "', '"+ HooksID +"', '"+ SoftPlasticsID +"', '"+ RodID +"', '"+ numOfHooks +"', '"+ numOfSoftPlastics +"')";
requ.query(sql, function (err, recordset)
if (err)
console.log(err)
else
res.send('Records were updated');
);
conn.close();
);
);
app.post('/', function (req, res)
var conn = new sql.Connection(config);
var requ = new sql.Request(conn);
conn.connect(function (err)
if (err)
console.log(err);
return;
var sql = "SELECT * FROM person";
requ.query(sql, function (err, recordset)
if (err)
console.log(err)
else
res.send(recordset);
);
conn.close();
);
);
出于安全考虑，我更改了服务器名称、用户和密码。它们是我项目的正确价值观
【问题讨论】：
【参考方案1】：让我印象深刻的第一件事是您应该将“选择”路由方法从 post 更改为 get...
例如：
app.post('/', function (req, res)
变成
app.get('/person', function (req, res)
然后将脚本添加到您的页面，该脚本基本上调用人员路由并使用结果填充页面上的容器。
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
if (this.readyState == 4 && this.status == 200)
var person = xhttp.responseText;
var element = document.getElementById("PersonContainer");
person.forEach(function(item, index)
element.innerHTML += '<li><p>' + item.name + '</p></li>'
);
;
xhttp.open("GET", "/person", true);
xhttp.send();
</script>
最后确保页面上存在“PersonContainer”元素...
<div id='PersonContainer'></div>
请注意，上面的代码已经过简化，可以做得更好，这只是为了帮助您指明正确的方向...
【讨论】：
可以把script部分放到PersonContainer的form和div里面吗？ 不，脚本部分应该放在结束正文标记之前。该脚本仍将在整个页面中可用。注意，该脚本是一个基本脚本，可帮助您调试和了解正在发生的事情。它可以而且应该改进...... 我将脚本放在了正确的位置，我遵循了 w3schools 上关于 xmlhttprequests 的教程。我将整个脚本包装在一个函数中，然后单击按钮，我在“onclick”部分中有该函数，但是当我单击它时没有任何反应。有什么建议吗？ 尝试将行 console.log('click working') 添加到函数的顶部，以确保单击事件句柄正常工作。如果您按键盘上的 F12 打开开发人员工具，您应该会看到输出。如果你不这样做，那么你需要仔细检查你对 onclick 部分的操作。如果有任何错误，请更新您的问题...或者您可以尝试将脚本移动到页面的“head”部分 var http 上方的 console.log 没有显示，好像我的 onclick 不起作用。以上是关于如何从记录集中获取数据到 html div的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jquery 将 @html.raw div HTML 保存并获取到数据库中并获取