如何使用 javascript 和 node.js - mysql 并且不使用 php 将 HTML 表单数据提交到 MySql 数据库表中？答案

【问题标题】：How can I submit HTML form data into MySql database table using javascript along with node.js - mysql and without php?如何使用 javascript 和 node.js - mysql 并且不使用 php 将 HTML 表单数据提交到 MySql 数据库表中？
【发布时间】：2021-01-31 22:47:08
【问题描述】：

我正在尝试创建一个博客，让观众（客人）可以向博主发送消息。准备好 HTML 表单，在 HTML 表单的提交按钮的 onclick() 函数中，执行名为 submitData() 的 javascript（名为 Db_connect.js）函数。在 submitData() 中，从同一个 javascript 中调用了另外两个函数 - 一个用于与 mysql 建立连接，另一个用于执行 mysql 查询以将数据插入数据库以存储表单数据。另一个名为 openWin() 的函数只是将插入的内容显示在一个单独的新小窗口中。

这是我用来连接数据库的 javascript 代码：

var con, sql;
function randomNumber(min, max) {  
    return Math.floor(Math.random()* (max - min) + min); 
}  

function submitData(objButton) {
    name = document.getElementById('name1').value; 
    email = document.getElementById('email1').value; 
    msg = document.getElementById('msg1').value; 
    i= randomNumber(1000000000000000,9999999999999999);
    document.getElementById('test').innerHTML=name;
    sql="INSERT INTO my_table(id, name, email, msg) VALUES(" + i + ", '" + name + "', '" + email + "', '" + msg +  "')";
    createConnection();
    insertData(sql);
    openWin();
}

var mysql = require('mysql');
function createConnection() {
      con = mysql.createConnection({
      host: "localhost",
      user: "username",
      password: "password",
      database: "mydb"
    });
}

function insertData(sql_insert) {
    con.connect(function(err) {
      if (err) throw err;
       con.query(sql_insert, function (err) {
        if (err) throw err;
        });
    });
}

function openWin(){
      var myBars = 'directories=no,location=no,menubar=no,status=no';
      myBars += ',titlebar=no,toolbar=no';
      var myOptions = 'scrollbars=no,width=400,height=200,resizeable=no';
      var myFeatures = myBars + ',' + myOptions;
      var newWin = open('', 'myWin', myFeatures);
      newWin.document.writeln('<form>');
      newWin.document.writeln('<table>');
      newWin.document.writeln('<tr><td>Your Message Sent...');
      newWin.document.writeln('</td></tr>');
      newWin.document.writeln('<tr valign=TOP><td>');
      newWin.document.writeln('<textarea cols=45 rows=7 wrap=SOFT>');
      newWin.document.writeln('Your Name : '+name);
      newWin.document.writeln('Your Email : '+email);
      newWin.document.writeln('Your Message : '+msg);
      newWin.document.writeln('Data Inserted!!!</textarea>');
      newWin.document.writeln('</td></tr>');
      newWin.document.writeln('<tr><td>');
      newWin.document.writeln('<input type=BUTTON value="Close"');
      newWin.document.writeln(' onClick="window.close()">');
      newWin.document.writeln('</td></tr>');
      newWin.document.writeln('</table></form>');
      newWin.document.close();
      newWin.focus();
}

这是我正在使用的 HTML 代码：

<head>
        <script src="Db_Connect.js" type="text/javascript"></script>
   </head>
<body>

        <script type="text/javascript"></script>
        <div id="frm">
            <form>
                <label id="name"> <b>Your Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: </b></label><input id="name1" type="text" name="user_name" placeholder="Your Name." required><label style="color:red; font-size:18px;"><b>&nbsp;*</b></label><br><br>  <!--placeholder="Your Name."-->
                <label id="email"><b>Your E-mail &nbsp;&nbsp;&nbsp;&nbsp;: </b></label><input id="email1" type="email" name="user_email" placeholder="Your Email ID." required><label style="color:red; font-size:18px;"><b>&nbsp;*</b></label><br><br>  <!--placeholder="Your Email ID."-->
                <label id="msg">  <b>Your Message : </b></label><textarea id="msg1" name="user_msg" maxlength="200" placeholder="Maximum 200 letters." required></textarea><label style="color:red; font-size:18px;"><b>&nbsp;*</b></label><br>             <!--<span id="send"><a id="link" href="http://www.google.co.in" target="_blank"><b>Send</b></a></span>-->
                <label style="color:red;font-size:10px;"><b>* Required fields</b></label><br>
                <input type="submit" id="link" value="Send" onclick="submitData(this)">    <!--onclick="submitData(this)"-->
            </form>
        </div>
</body>

没有来自 HTML 的数据输入的相同 javascript 在控制台中可以正常工作。但是，将 HTML 表单数据传递给它后，它根本不起作用。请注意，我没有使用 php，也不想使用它。请帮助我摆脱这个问题，并在不使用 php 的情况下为我提供一些解决方案。

【问题讨论】：

niojs 将像 php 脚本一样响应您的请求，在这种情况下，bith 是相等的。如果您想知道 tio 如何从节点 js 访问 mysql，请参阅 stackoverflow.com/questions/15778572/…

标签： javascript html mysql node.js

【解决方案1】：

您必须使用 node.js 和 express.js 创建 Web 服务器，然后从 HTML FORM POST 获取数据。按照链接和代码示例。

https://www.tutorialsteacher.com/nodejs/expressjs-web-application

处理 POST 请求

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form action="/submit-student-data" method="post">
        First Name: <input name="firstName" type="text" /> <br />
        Last Name: <input name="lastName" type="text" /> <br />
        <input type="submit" />
    </form>
</body>
</html>

var express = require('express');
var app = express();

var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }));

app.get('/', function (req, res) {
    res.sendFile('index.html');
});

app.post('/submit-student-data', function (req, res) {
    var name = req.body.firstName + ' ' + req.body.lastName;
    
    res.send(name + ' Submitted Successfully!');
});

var server = app.listen(5000, function () {
    console.log('Node server is running..');
});

【讨论】：

没错。您无法从浏览器中运行的 Javascript 代码连接到 MySql。