Question

我正在尝试在Visual Studio中使用HTML和JS将注册数据插入MySQL。

我能够查看该网页，单击注册链接并完成注册表格。当我按 submit （注册）时，会出现问题。该页面返回到主页，并且没有任何内容添加到数据库中。我没有收到任何错误消息。

该表格的代码为：

var mysql = require('mysql');
var express = require('express');
var app = express();
var server = null;

var con = mysql.createConnection({
  host: "localhost",
  user: "Personal",
  password: "****************",
  database: "Personal"
});

app.get('/api/users', function(req, res) {
  con.query("SELECT * FROM users", function(err, result, fields) {
    if (err)
      return console.trace('fatal error: ' + err.message);
    res.json(result);
  });
});

app.get('/index', function(req, res) {
  res.sendfile('index.html', {
    root: __dirname + '/public'
  });
});

app.use('/static', express.static('public'))

app.get('/', function(req, res) {
  res.sendfile('index.html', {
    root: __dirname + '/public'
  });
});

con.connect(function(err) {
  if (err)
    return console.trace('fatal error: ' + err.message);
  server = app.listen(5000, function() {
    console.log('Server is running..');
  });

});


app.post('/signup', function(req, res) {

  var fname = req.body.fname;
  var lname = req.body.lname;
  var company = req.body.company;
  var email = req.body.email;
  var contact = req.body.contact;
  res.write('You sent the fname "' + req.body.fname + '".\n');
  res.write('You sent the lname "' + req.body.lname + '".\n');
  res.write('You sent the company "' + req.body.company + '".\n');
  res.write('You sent the email "' + req.body.email + '".\n');
  res.write('You sent the contact "' + req.body.contact + '".\n');

  con.connect(function(err) {
    if (err) throw err;
    var sql = "INSERT INTO form (fname, lname, company, email, contact) VALUES ('" + fname + "', '" + lname + "', '" + company + "', '" + email + "', '" + contact + "')";
    con.query(sql, function(err, result) {
      if (err) throw err;
      console.log("1 record inserted");
      res.end();
    });
  });
})

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Personal</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="static/index.css">

  <body>
    <div class="header">
      <h1>Personal</h1>
      <P>Personal</P>
    </div>
    <button onclick="document.getElementById('id01').style.display='block'" style="width:25%;" class="center">Login</button>
    <div id="id01" class="modal">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <form class="modal1-content">
        <div class="container1">
          <h1>Login</h1>
          <p>personal</p>
          <hr>
          <label for="Username"><b>Username</b></label>
          <input type="text" placeholder="Username" name="Username" required>
          <label for="psw"><b>Password</b></label>
          <input type="password" placeholder="Password" name="psw" required>
          <label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
          <br />
          <input type="submit" value="login" class="login" />
        </div>
    </div>
    </form>
    </div>
    <script>
      var modal = document.getElementById('id01');
      window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      }
    </script>
    <button onclick="document.getElementById('id02').style.display='block'" style="width:25%;" class="center">Sign-up</button>
    <div id="id02" class="modal1">
      <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal1">&times;</span>
      <form class="modal1-content">
        <div class="container">
          <h1>Sign Up</h1>
          <p>Please fill in this form to create an account.</p>
          <hr>
          <form action="/signup" method="POST">
            <label for="fname"><b>First Name</b></label>
            <input type="text" placeholder="Enter First Name" name="first name" required>
            <label for="lname"><b>Last Name</b></label>
            <input type="text" placeholder="Enter Last Name" name="lname" required>
            <label for="company"><b>Company</b></label>
            <input type="text" placeholder="Enter Company" name="company" required>
            <label for="email"><b>Email</b></label>
            <input type="text" placeholder="Enter Email" name="email" required>
            <label for="contact"><b>Contact Number</b></label>
            <input type="text" placeholder="Enter Contact Number" name="contact" required>
            <label for="psw"><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" required>
            <label for="psw-repeat"><b>Repeat Password</b></label>
            <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
            <label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
            <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
            <input type="submit" value="Sign-up" class="signup" />
        </div>
    </div>
    </form>
    </form>
    </div>
    </form>
    </form>
    <script>
      var modal1 = document.getElementById('id02');
      window.onclick = function(event) {
        if (event.target == modal1) {
          modal1.style.display = "none";
        }
      }
    </script>
  </body>
</head>

</html>

我该如何解决？

Answer 1

您需要使用action属性指定要向其提交数据的端点的URL，并使用method属性指定方法：

<form class="modal1-content" action="/signup" method="post">

默认值分别是当前页面和GET，这就是提交表单只是重新加载主页的原因。

如何使用HTML和Node JS将数据插入MySQL？

1 个答案: