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。添加用户页面是用户填写的表单，然后调用插入用户代码，但它似乎不起作用。实际上，当我提交时，网址不会从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将重新加载您的页面。

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

1 个答案: