如何使用 javascript 将数据从 html 表单保存到 mysql 数据库？答案

【问题标题】：How do you save data from an html form to a mysql database using javascript?如何使用 javascript 将数据从 html 表单保存到 mysql 数据库？
【发布时间】：2020-08-03 17:47:10
【问题描述】：

我正在尝试将数据从 html 表单保存到 mysql 数据库中。显然我是新手，所以我知道我做错了什么，但是经过大量研究后，我仍然无法弄清楚。我为测试目的创建了一个简单版本的表单。

<!DOCTYPE html>
<html>

  </head>
  <body>
  <script src="scripts/test.js"></script>


<form>
<input id="firstName" type="text" class="form-control" name="firstName" placeholder="First Name">
 <input id="lastName" type="text" class="form-control" name="lastName" placeholder="Last Name">
 <input id="userName" type="text" class="form-control" name="userName" placeholder="Username">
 <input id="inputText" type="text" class="form-control" name="email" placeholder="Email">
<input id="currentPassword" type="password" class="form-control" name="currentPassword" placeholder="Current Password"> 

 <input type="submit" onclick="saveAccount()" id="createAccountButton" class="button2" value="Create Account"></input>

</form>

  </body>
</html>

我的javascript代码是：

function saveAccount(){
var mysql = require('mysql');

var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "abc123",
  database: "PBSC_Parking_DB"
});

con.connect(function(err) {
  if (err) throw err;
console.log("connected");
});

var firstName = document.getElementById("firstName");
var lastName = document.getElementById("lastName");
var psw = document.getElementById("psw");
var userName = document.getElementById("userName");
var email = document.getElementById("inputText");



var sql = "INSERT INTO accounts (UserName, FirstName, LastName, Email, UserPassword) VALUES ('"+userName+ "', '"+firstName+"','"+lastName+"','"+email+"','"+psw+"')";
con.query(sql, function (err, result) {
    if (err) {
        throw err;

    }

    console.log(result.affectedRows + " record(s) updated");
  });
}

我读到您假设在函数外部连接到数据库，但将其移到函数外部似乎并不能解决我的问题。我还被告知我不应该使用“文档”。但我不确定如何从表单中提取数据以在我的 sql 语句中使用。

我尝试将值硬编码到 INSERT 语句中，而不是使用函数，而只是通过命令提示符运行 js 文件。这可以更新我的数据库，所以我知道我正在正确地进行连接......我只是不知道如何使它与表单一起工作。

注意：我也尝试使用 nodejs 和 ejs 查找教程，但是在仔细阅读教程之后，我仍然无法让它们工作。

【问题讨论】：

var mysql = require('mysql'); 表示此代码适用于 node.js 服务器端上下文。似乎您正试图在浏览器中运行它“cient-side”。您需要获取 node.js 服务器并创建 http 端点，就像使用 express.js 一样。
我已经安装了nodejs。如果您有任何关于如何“创建 http 端点”/我将如何使用它们的资源，我将不胜感激。我找不到很多关于如何保存表单数据的好资源。
expressjs.com/en/starter/hello-world.html 从这里开始并在您的节点服务器上创建一些路由。这些路由之一应该类似于/save-form-data，然后您可以使用<form> 的action 属性或使用来自客户端JS 的AJAX 调用“命中”此路由。将此路由的回调设置为将行保存到数据库的节点脚本。

标签： javascript mysql database forms

【解决方案1】：

您只是从表单中检索 DOM 元素。您要查询的是输入的值。

var firstName = document.getElementById("firstName").value;

其他变量也一样。

【讨论】：

我最初在那里有 .value 但我的代码会在这些行上中断，所以我将其取下并修复了它..
尝试使用 .value 并将函数作为 window.onload 回调运行，或者将 html 脚本标签放在正文中，在表单之后