如何通过XMLHttpRequest不以URL参数方式发送数据及服务端获取

嘿，这个问题很常见！要隐藏请求参数不暴露在URL里，核心就是把GET请求改成POST请求，把参数放在请求体里而不是URL的查询字符串中。下面分前端实现和服务端获取两部分给你详细说明：

POST请求的参数会被放在HTTP请求的「请求体」中，不会出现在URL里。这里有两种常用的方式来构造请求数据：

方式1：使用FormData（推荐，自动处理编码） #

FormData会自动帮你处理参数的编码问题，尤其适合包含文件上传的场景，普通参数也能用：

// 初始化XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 打开POST请求，第三个参数true表示异步请求
xhr.open('POST', 'http://localhost:8080/test', true);

// 构造FormData并添加参数
const formData = new FormData();
formData.append('param1', param1Value);
formData.append('param2', param2Value);

// 请求成功/失败的回调
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('请求成功！响应内容：', xhr.responseText);
  } else {
    console.error('请求出错，状态码：', xhr.status);
  }
};

// 发送请求
xhr.send(formData);

方式2：手动拼接参数字符串 #

如果不想用FormData，可以手动拼接参数，记得要给特殊字符编码（比如中文、&、=这些），同时设置对应的请求头：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8080/test', true);

// 必须设置这个请求头，告诉服务端参数是表单编码格式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.onload = function() {
  // 同上面的回调逻辑
};

// 用encodeURIComponent编码参数，避免乱码或解析错误
const params = `param1=${encodeURIComponent(param1Value)}&param2=${encodeURIComponent(param2Value)}`;
xhr.send(params);

额外选项：传JSON格式数据 #

如果你的场景更适合用JSON传递复杂数据，也可以这么做：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8080/test', true);
// 告诉服务端请求体是JSON格式
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  // 回调逻辑
};

// 把参数对象转成JSON字符串
const data = JSON.stringify({
  param1: param1Value,
  param2: param2Value
});
xhr.send(data);

不同的服务端语言/框架，获取POST参数的方式略有不同，这里举几个常见的例子：

Java Servlet #

直接用request.getParameter()就能拿到表单编码的参数：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 获取POST参数
    String param1 = request.getParameter("param1");
    String param2 = request.getParameter("param2");
    
    // 你的业务逻辑...
    response.getWriter().write("参数已接收");
}

如果是JSON格式的请求，需要自己读取请求体并解析成JSON对象。

Node.js（Express框架） #

需要先配置中间件来解析请求体：

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

// 解析表单编码的请求体（对应前面的方式1、2）
app.use(express.urlencoded({ extended: true }));
// 解析JSON格式的请求体（对应前面的JSON选项）
app.use(express.json());

app.post('/test', (req, res) => {
    // 不管是表单还是JSON，都从req.body里拿参数
    const param1 = req.body.param1;
    const param2 = req.body.param2;
    
    res.send(`收到参数：param1=${param1}, param2=${param2}`);
});

app.listen(8080, () => {
    console.log('服务器在8080端口启动');
});

PHP #

直接用$_POST超全局数组获取表单编码的参数：

<?php
// 获取POST参数
$param1 = $_POST['param1'];
$param2 = $_POST['param2'];

// 业务逻辑...
echo "参数已接收：param1=$param1, param2=$param2";
?>

如果是JSON请求，需要用file_get_contents('php://input')读取请求体再解析。

• POST请求的参数虽然不会出现在URL里，但如果用的是HTTP协议，请求体还是明文传输的！如果是敏感数据（比如密码、支付信息），一定要用HTTPS协议加密传输。
• 有些后端框架默认可能不开启POST请求的参数解析，记得要配置对应的中间件或解析逻辑。

内容的提问来源于stack exchange，提问作者laxman kumar