JSON没有被发送到AJAX POST请求[关闭]

Posted 2023-02-27

【中文标题】JSON没有被发送到AJAX POST请求[关闭]

【英文标题】：JSON isn't getting sent through to AJAX POST request [closed]

【发布时间】：2020-08-03 11:54:45

【问题描述】：

我有一个 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 ));。

【问题讨论】：

服务器端 JSON 解析器在哪里？

【参考方案1】：

您必须使用正文解析器，否则您的 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?

【参考方案2】：

我有 app.use(bodyParser.urlencoded( extended: true ));在我的 node.js 文件中。

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

您需要JSON parser。

app.use(bodyParser.json());

…或post URL Encoded数据：

【参考方案3】：

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

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

您的客户端代码是正确的。

【讨论】：

哦，是的，当然，我怎么会忘记！我应该关闭这个问题，因为它可能对其他人没有多大帮助？