Question

我的HTML表单如下：

<form id="loginForm" name="loginForm">
   <div class="form-group">
   <input type="username" class="form-control" id="username" name="username" placeholder="Your username..." >
   </div>
   <div class="form-group">
   <input type="password" class="form-control" id="password" name="password" placeholder="Your password...">
   </div>
   <button class="btn btn-primary btn-block btn-round" id="loginButton" type="submit">Login</button>
</form>

和一个Javascript文件，其中包含以下代码以发出AJAX请求：

//credits to @lndgalante
if (typeof window !== 'undefined') {
  window.addEventListener('load', () => {
        const form = document.getElementById('loginForm');

        form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const elements = event.target;
        const username = elements.username.value;
        const password = elements.password.value;
        const dataToSend = { username, password };

        try {

         console.log(JSON.stringify(dataToSend)); //To check variables are being passed correctly

         return await fetch('/login', {
            method: 'POST',
            body: JSON.stringify(dataToSend),
            headers: { 'Content-Type': 'application/json' }
          });
        } catch (error) {
          console.log(error);
        }
      });
    });
  };

以及具有相应POST路由的node.js文件：

app.post('/login', async (req, res) => {
    try {
      const username = req.body.username;
      const password = req.body.password;
      console.log(username, password, req.body); //To check variables are being passed correctly
    ...
    }
});

但是问题是， console.log(JSON.stringify(dataToSend));按预期返回{"username":"username1","password":"password1"} //or whatever the user input is，而 console.log(username, password, req.body)返回undefined undefined {}。

有人知道我在做什么吗？

编辑：我正在使用const app = express();，并且我的node.js文件中有app.use(bodyParser.urlencoded({ extended: true }));。

Answer 1

假设您正在使用Express.js（可能应该标记问题），则需要确保使用express.json()（或bodyParser.json()）中间件进行JSON正文解析。

const app = express();
app.use(express.json());
app.post('/login', ...);

您的客户端代码正确。

Answer 2

我有app.use（bodyParser.urlencoded（{extended：true}））;在我的node.js文件中。

您要发布JSON，而不是URL编码数据。

您需要一个JSON parser。

    >>> from midi import MidiConnector
    >>> conn = MidiConnector('/dev/serial0')  # path to use on RaspberryPi 3

…或到post URL Encoded数据：

Answer 3

您必须使用正文解析器，否则您的NodeJS应用程序将不知道如何解释在请求正文中收到的字符串。

npm install --save body-parser

和

var bodyParser = require('body-parser')
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
}));

或

app.use(express.json());
app.use(express.urlencoded());
app.use(express.multipart());

因此您的代码将正确运行。

此处有更多详细信息：How to retrieve POST query parameters?

JSON没有通过AJAX POST请求发送

3 个答案: