mysql - 使用 Node.js 和 Handlebars 插入 MySQL 记录时出现问题

Question

我在尝试提交包含插入表中的用户信息的表单时遇到问题。我有一个用户表单，允许使用以下内容输入用户数据:

<form id="userForm">
        <fieldset>
            <legend>Add User</legend>
            <p>First Name: <input id="fname" type="text" name="fname"/></p>
            <p>Last Name: <input  id="lname" type="text" name="lname"/></p>
            <p>Email: <input id="email" type="text" name="email"/></p>
            <p>Password: <input id="password" type="text" name="password"/></p>
        </fieldset>
        <input id="addUser" type="submit" name="add" value="Add User" onclick="addRow()" />
</form>

<script src="script.js"></script>

然后在我的 script.js 代码中启动以下代码:

function addRow(){

    var form = document.getElementById("userForm");

    var req = new XMLHttpRequest();

          // Add the form data to the ajax request
          var queryString = "";

          var fname = form.fname.value;
          var lname = form.lname.value;
          var email = form.email.value;
          var password = form.password.value;

          queryString += "fname=" + fname + "&";
          queryString += "lname=" + lname + "&";
          queryString += "email=" + email + "&";
          queryString += "password=" + password;

          req.open('GET', '/insert-user?' + queryString, true);
          req.send();
          console.log(req.status);

执行服务器端代码:

app.get('/add-user', function(req,res){
  var context = {};
  res.render('addUser', context);
});

app.get('/insert-user',function(req,res,next){
  var context = {};
  pool.query("INSERT INTO user (`fname`, `lname`, `email`, `password`) VALUES (?,?,?,?)", 
  [req.query.fname, req.query.lname, req.query.email, req.query.password], 
  function(err, result){
    if(err){
      next(err);
      return;
    }
    context.results = "Inserted id " + result.insertId;
    res.render('exerciseTable',context);
  });
});

该记录未插入表中。当我 console.log(req.status) 时，我在控制台中看到 0。添加用户页面是用户填写的表单，然后调用插入用户代码，但它似乎不起作用。事实上，URL 并没有从 http://18.219.103.143:3000/add-user 更改为 http://18.219.103.143:3000/insert-user? 当我提交时。它只是保持静态。似乎我的 app.get('/insert-user'... 代码甚至没有被调用。有人知道我缺少什么吗？

我在控制台中收到此错误:

Answer 1

尝试放置

<form id="userForm" onsubmit="return false;">

否则将调用表单上的默认操作。由于您的按钮是提交按钮，并且未设置默认操作，因此它默认为同一页面，并且不返回任何内容或返回 true 将重新加载您的页面。