Javascript 无法发布/login.html

我无法使用表单将数据发送到服务器。我已经制作了一个运行良好的注册表单，在大多数情况下，我的登录表单客户端javascript与注册表单的javascript非常相似，我只是不明白为什么它不工作。它只是告诉我“不能发布/login.html”

以下是登录表单html：

  <div class="loginTitle">
  <h1>Login</h1>
  </div>

  <div class="loginFormLayout">
    <form method=post id="loginForm">

      <div class="loginFormText">
        <label for="username">Username</label>
      </div>

      <div class="loginFormEntry">
        <input type="text" placeholder="Enter Username" name="loginUsername" required>
      </div>

      <div class="loginFormText">
        <label for="password">Password</label>
      </div>

      <div class="loginFormEntry">
        <input type="password" placeholder="Enter Password" name=loginPassword required>
      </div>

      <button type="submit" class="loginButton">Log In</button>

    </form>
  </div>

<div class="loginMenu">

  <div class="loginTitle">
  <h1>Register</h1>
  </div>

  <div id="registerWarning"></div>

  <div class="loginFormLayout">
    <form method="post" id="registerForm">

      <div class="loginFormText">
        <label for="username" id="newUsername">Username</label>
      </div>

      <div class="loginFormEntry">
        <input type="text" placeholder="Create Username" name="username" required>
      </div>

      <div class="loginFormText">
        <label for="password" id="newPassword">Password</label>
      </div>

      <div class="loginFormEntry">
        <input type="password" placeholder="Create Password" name=password required>
      </div>

      <div class="loginFormText">
        <label for="confirmPassword">Confirm Password</label>
      </div>

      <div class="loginFormEntry">
        <input type="password" placeholder="Confirm Password" name="confirmPassword" required>
      </div>

      <button type="submit" class="registerButton">Register</button>

    </form>
  </div>

</div>

至于服务器端javascript，控制台日志只是为了查看信息是否到达服务器

app.post('/loginUser', (req, res) => {
  console.log(req.body.username);
  console.log(req.body.password);
});

编辑：我还决定为我的注册表单发布信息，它确实有效，并且使用与登录表单类似的逻辑。也许我遗漏了登录逻辑中没有的东西

注册表格html:

  <div class="loginTitle">
  <h1>Login</h1>
  </div>

  <div class="loginFormLayout">
    <form method=post id="loginForm">

      <div class="loginFormText">
        <label for="username">Username</label>
      </div>

      <div class="loginFormEntry">
        <input type="text" placeholder="Enter Username" name="loginUsername" required>
      </div>

      <div class="loginFormText">
        <label for="password">Password</label>
      </div>

      <div class="loginFormEntry">
        <input type="password" placeholder="Enter Password" name=loginPassword required>
      </div>

      <button type="submit" class="loginButton">Log In</button>

    </form>
  </div>

<div class="loginMenu">

  <div class="loginTitle">
  <h1>Register</h1>
  </div>

  <div id="registerWarning"></div>

  <div class="loginFormLayout">
    <form method="post" id="registerForm">

      <div class="loginFormText">
        <label for="username" id="newUsername">Username</label>
      </div>

      <div class="loginFormEntry">
        <input type="text" placeholder="Create Username" name="username" required>
      </div>

      <div class="loginFormText">
        <label for="password" id="newPassword">Password</label>
      </div>

      <div class="loginFormEntry">
        <input type="password" placeholder="Create Password" name=password required>
      </div>

      <div class="loginFormText">
        <label for="confirmPassword">Confirm Password</label>
      </div>

      <div class="loginFormEntry">
        <input type="password" placeholder="Confirm Password" name="confirmPassword" required>
      </div>

      <button type="submit" class="registerButton">Register</button>

    </form>
  </div>

</div>

注册表单服务器端javascript:

//Login as an existing user
const login = document.getElementsByClassName('loginButton');
const loginForm = document.getElementById('loginForm');
const loginURL = 'http://localhost:3000/loginUser';

loginForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const formData = new FormData(loginForm);
  let username = formData.get('loginUsername');
  let password = formData.get('loginPassword');
  loginForm.reset();

  let user = { //Create a user object that will be sent to the backend and compared to the user database
    username,
    password
  };

  fetch(loginURL, { //Send the user object to the backend in JSON format to be checked against the database
    method: 'POST',
    body: JSON.stringify(user),
    headers: {
      'content-type': 'application/json'
    }

})});

//Register a new user
const register = document.getElementsByClassName('registerButton');
const registerForm = document.getElementById('registerForm');
const registerURL = 'http://localhost:3000/createNewUser';
//When the user presses the register button, get the info from the form
registerForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const formData = new FormData(registerForm);
  let newUsername = formData.get('username');
  let newPassword = formData.get('password');
  let confirmPassword = formData.get('confirmPassword')
  registerForm.reset();

  //Make sure new password and confirm password are equal
  if (newPassword == confirmPassword) {
    if (newUsername != "" && newPassword != ""){ //Make sure user enters something for both fields
      
      let newUser = { //Create an object to send to the back end
        newUsername,
        newPassword
      };

      fetch(registerURL, { //Send the newUser object to the backend in JSON format to be added to the database
        method: 'POST',
        body: JSON.stringify(newUser),
        headers: {
          'content-type': 'application/json'
        }
      });

    }
  }
  else { //If newPassword and confirmPassword are not equal, ask the user to enter them correctly
    const registerWarning = document.getElementById('registerWarning');
    registerWarning.innerText = 'Password and Confirm Password do not match';
    registerWarning.style.padding = "10px";
    registerWarning.style.background = 'red';
  };

});

 app.post('/createNewUser', (req, res) => {
      let newUsername = req.body.newUsername;
      let newPassword = req.body.newPassword;
    
      let newUserData = 'INSERT INTO users (username, password) VALUES (?, ?)';//Use the question marks as placeholders
    
      //Use bcrypt to hash the password before putting it in the database
      bcrypt.hash(newPassword, saltRounds, function(err, hash) {
        db.query(newUserData, [newUsername, hash], function(err, result) {
          if (err) throw err;
          console.log('New user registered');
        });
      });
    });

---

尝试将表单方法（post）用引号（“”）括起来，如so

---

密码输入的name属性的值也应该用引号括起来。与此类似，我认为问题在于，在调用POST/loginUser端点时，您没有告诉服务器要向客户端发送什么。尝试添加

res.sendStatus（200）在POST/loginUser处理程序函数的末尾（就在console.log（req.body.password）；

之后）。

多亏@Rocky Sims的帮助，我才明白这一点

---

基本上，注册表单在登录html页面上不存在，这在登录代码之前就抛出了一个错误，关于它是如何不存在的。因此，我不得不将register.js和login.js文件分开，因为问题是因为它们在同一个文件中。

解释一下“它不工作”是什么样子会很有帮助。这是帖子的标题，当我点击提交按钮时，它会说Cannot post/login.htmlWhat这么说？注册表单服务器端是什么样子的？您是否可能在

POST/createNewUser

处理程序中执行类似于

res.json（{data:'whatever'}）

的操作，而不是在

POST/logiuser

处理程序中？我刚刚用它更新了OP，它所做的只是将数据放入数据库中。但是当我设置它的时候，我可以像我现在正在尝试的那样来控制台.log（req.body），只是为了确保它在服务器上，所以我不确定为什么登录时不能使用它。同样，这对我不起作用，而且注册表单已经可以使用了。我在所有内容中都添加了引号，但请注意，在我添加引号之前，注册表表单就已经工作了，所以我不确定这是否是我遗漏的问题？还有一个原因是你对某些事物使用单引号，而对另一些事物使用双引号，它们被计算机读取时不是一样的吗？引号并不重要。使用Postman测试您的登录api，以确定问题出在服务器端还是客户端。您处理登录请求的方式可能有问题。这也没有解决问题。我还继续尝试使用“/createNewUser”处理程序将新用户名和新密码记录到console.log中，它成功了，所以我几乎可以肯定它是客户端的。