使用HTTP Post方法发送按钮ID失败 求问题排查指导

问题原因 #

• 缺少Content-Type请求头声明：XMLHttpRequest发起POST请求时不会自动设置内容类型头，绝大多数服务端框架依赖该头部识别请求体格式，未设置的情况下服务端不会主动解析请求体内容，自然无法获取你发送的按钮id。
• 发送的数据无参数标识：你直接发送纯id字符串，没有绑定对应的参数名，服务端无法判断这段字符串对应的业务字段是什么，无法正常提取取值。

修复方案 #

根据你服务端接受的格式二选一即可：

方案1：发送表单格式数据（适配绝大多数传统后端默认的表单参数接收逻辑） #

修改后的代码如下：

<HTML>
<head>
<script>
function fun1(element) {
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "/prc", true);
    // 新增请求头，声明内容为表单编码格式
    xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    // 按「参数名=参数值」格式发送数据
    xhttp.send("button_id=" + element.id);
  }
</script>
</head>
<body>
<button type="button" onclick="fun1(this)" id="img1">IMAGE</button>
</body>
</html>

服务端直接读取button_id的表单参数即可拿到按钮id。

方案2：发送JSON格式数据（适配前后端分离的JSON接口逻辑） #

修改后的代码如下：

<HTML>
<head>
<script>
function fun1(element) {
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "/prc", true);
    // 新增请求头，声明内容为JSON格式
    xhttp.setRequestHeader("Content-Type", "application/json");
    // 把数据包装成JSON对象后转字符串再发送
    xhttp.send(JSON.stringify({button_id: element.id}));
  }
</script>
</head>
<body>
<button type="button" onclick="fun1(this)" id="img1">IMAGE</button>
</body>
</html>

服务端将请求体按JSON解析后，读取button_id字段即可拿到按钮id。

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