前端HTTP发POST请求携带参数与后端接口接收参数的实现

2023年5月19日下午8:58 • JavaScript

下面是详细讲解“前端HTTP发POST请求携带参数与后端接口接收参数的实现”的完整攻略。

一、前端HTTP发POST请求携带参数的实现

1. 使用XMLHttpRequest

XMLHttpRequest是前端与服务器进行数据交互最常用的方式。要发送带有参数的POST请求，需要设置请求头和请求体。请求体是以字符串形式发送给服务器的，一般将参数转换成JSON或查询字符串格式。

var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/user', true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
var params = {
  name: '张三',
  age: 20
};
xhr.send(JSON.stringify(params));

2. 使用fetch

fetch是JavaScript原生提供的新的数据请求API，使用起来比XMLHttpRequest更加简洁方便。同样的，要发送带有参数的POST请求，需要设置请求头和请求体。

fetch('/api/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json; charset=UTF-8'
  },
  body: JSON.stringify({
    name: '张三',
    age: 20
  })
}).then(function (response) {
  return response.json();
}).then(function (data) {
  console.log(data);
}).catch(function (error) {
  console.log(error);
});

二、后端接口接收参数的实现

后端接口一般可以使用HTTP框架来处理请求和响应。假设后端使用Node.js + Express框架的情况下，可以使用req.body来获取POST请求携带的参数。

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

app.use(express.json()); // 解析 application/json
app.use(express.urlencoded({ extended: true })); // 解析 application/x-www-form-urlencoded

app.post('/api/user', function (req, res) {
  var params = req.body;
  console.log(params);
  res.status(200).json({
    code: 0,
    msg: 'success'
  });
});

app.listen(3000, function () {
  console.log('Server running on port 3000');
});

在上面的代码中，我们使用了express中间件来解析POST请求的请求体。express.json()用于解析 application/json格式的请求体，express.urlencoded()用于解析 application/x-www-form-urlencoded格式的请求体。

三、完整示例

假设前端代码位于http://localhost:8080，后端接口位于http://localhost:3000/api/user，并且需要传递参数name和age。下面给出前后端完整示例代码。

前端示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>POST请求示例</title>
</head>
<body>
  <script>
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:3000/api/user', true);
    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      }
    };
    xhr.send(JSON.stringify({
      name: '张三',
      age: 20
    }));
  </script>
</body>
</html>

后端示例代码

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

app.use(express.json()); // 解析 application/json
app.use(express.urlencoded({ extended: true })); // 解析 application/x-www-form-urlencoded

app.post('/api/user', function (req, res) {
  var params = req.body;
  console.log(params);
  res.status(200).json({
    code: 0,
    msg: 'success'
  });
});

app.listen(3000, function () {
  console.log('Server running on port 3000');
});

在以上示例代码中，前端使用了XMLHttpRequest发起POST请求，并携带了name和age两个参数。后端接口使用了express框架来处理请求并输出请求体内容。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：前端HTTP发POST请求携带参数与后端接口接收参数的实现 - Python技术站