使用Node.js和把手插入MySQL记录的问题

Question

尝试提交带有插入表中的用户信息的表单时遇到问题。 我有一个userForm，可以使用以下命令输入用户数据：

<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将重新加载页面。