📜  您将在 express 应用程序中使用哪种方法从客户端获取 json 数据? - Javascript(1)

📅  最后修改于: 2023-12-03 15:39:36.843000             🧑  作者: Mango

您将在 express 应用程序中使用哪种方法从客户端获取 json 数据? - Javascript

在 Express 应用程序中获取 JSON 数据非常常见。常用的方法如下:

1. 使用 body-parser 中间件

body-parser 是一个解析请求体中的中间件,它可以解析 JSON、Raw、Text 和 URL-encoded 格式的请求体,并把解析后的数据放到 req.body 中。安装:

npm install body-parser

使用:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

app.post('/api/users', (req, res) => {
  const user = req.body;
  // ...
});

app.listen(3000);
2. 使用 express.json() 中间件

Express 4.16.0 版本以上内置了一个解析 JSON 请求体的中间件 express.json(),使用方式和 body-parser 差不多:

const express = require('express');
const app = express();

app.use(express.json());

app.post('/api/users', (req, res) => {
  const user = req.body;
  // ...
});

app.listen(3000);
3. 使用 fetch 或 XMLHttpRequest 发送 JSON 请求

通过 fetch 函数或 XMLHttpRequest 对象发送 JSON 请求时,需要设置请求头 Content-Type: application/json,并把请求体转换成 JSON 格式发送:

// fetch 方式
fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'john',
    password: '123456'
  })
}).then(/* 处理响应 */);

// XMLHttpRequest 方式
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/users', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    // ...
  }
};
xhr.send(JSON.stringify({
  username: 'john',
  password: '123456'
}));

以上就是从客户端获取 JSON 数据的几种常见方式,可以根据具体的需求选择合适的方式进行使用。