将数据从 HTML 表单发送到 Express API答案

【问题标题】：Send data from HTML form to Express API将数据从 HTML 表单发送到 Express API
【发布时间】：2021-07-03 17:21:54
【问题描述】：

我正在尝试为用户构建登录页面，并且需要将登录信息发送到我的快递服务器。我不太确定如何为我的服务器调用 api 并发送信息。现在，当我尝试通过单击按钮提交表单时，出现 405 错误方法不允许。

index.html:

<!DOCTYPE html>
<html land="en">
  <head>
    <meta charset="UTF-8">
    <title>Home page</title>
    <script src="../app.js"></script>
  </head>
  <body>
    <a href="login.html">To login</a>
  </body>
</html>

<!DOCTYPE html>
<html land="en">
  <head>
    <meta charset="UTF-8">
    <title>Login page</title><br><br>
    <script src="../app.js"></script>
  </head>
  <body>
    <form id="login-form" method="post" action="/login">
      <input type="text" name="username" id="username-field" placeholder="Username" required><br><br>
      <!-- TODO: Change type to "password" -->
      <input type="text" name="password" id="password-field" placeholder="Password" required><br><br>
      <input type="submit" value="Login" id="login-form-submit">
    </form>
  </body>
</html>

app.js：

const express = require('express')
var bodyParser = require('body-parser')
var port = process.env.PORT || 3000;

var app = express();
app.use(express.json());
app.use(express.urlencoded({"extended": true}));

app.get('/', function (req, res) {
    res.render(__dirname + '/views/index.html');
});

app.post('/login', function (req, res) {
    res.statusCode = 200;
    res.send({ 'body': req.body });
});

// Listen on port 3000, IP defaults to 127.0.0.1
app.listen(port, () => {
    console.log('Server listening at http://127.0.0.1:' + port + '/');
});

【问题讨论】：

奇怪的是app.js 是您的服务器，但您似乎将它包含在您的HTML 页面中。 app.js 只能在服务器中工作，而不是在浏览器中。在浏览器中查找任何控制台错误。
另外，您正在访问 localhost:3000 的服务器，对吗？即这是您在浏览器中访问的页面？
您的代码看起来不错。尝试先运行快速服务器，然后提交您的表单
@user2740650 当我运行我的服务器然后打开浏览器页面到localhost:3000/login 它说 404 错误无法 GET /login
我想从 HTML 页面提交一些表单并让快速服务器处理它。但是，我不确定如何使用 HTML 表单发送请求。

标签： javascript html express

【解决方案1】：

您可以使用 javascript 来实现。将此添加到您的 login.html 文件中

<script type="text/javascript" >
async function login(){
  // Get values from FORM
  let username = document.getElementById("username-field")
  let password = document.getElementById("password-field")

  // Body payload
  let body = { username, password }

  // Fetch options
  let option = {
    method: 'POST',
    body: JSON.stringify(body),
    headers: {
        'Content-Type': 'application/json'
    }
  }

  // Call /login as POST and wait for reply
  const response = await fetch(`/login`, options)
  const json = await response.json()

  // Use json response
  alert(json)
}

document.getElementById("login-form-submit").addEventListener("click", login);
</script>

为了使服务器正常启动，您需要确保将其作为node app.js 运行，而不是将其添加到 html 文件中。

更新： 查看此 repo 以获得有效的解决方案：https://github.com/rui-costa/stackoverflow-68238492

【讨论】：

我认为在设置 onSubmit=login() 时不会调用我的 express /login api。
我的服务器说它正在监听但没有响应任何 API 请求。
查看repo。这应该可以解决您的问题。否则我们需要深入调查。