如何从记录集中获取数据到 html div答案

【问题标题】：How to fetch data from recordset to html div如何从记录集中获取数据到 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();
    });
});

出于安全考虑，我更改了服务器名称、用户和密码。它们是我项目的正确价值观

【问题讨论】：

标签： html css sql node.js express

【解决方案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 不起作用。