原生JavaScript实现与jQuery效果一致的AJAX POST参数提交方案

核心原因 #

• application/x-www-form-urlencoded 格式要求载荷为key1=编码后的值1&key2=编码后的值2的字符串，你之前用JSON.stringify()生成的JSON串不符合该格式规范，会被后端整体识别为一个没有值的表单键，导致参数解析失败。
• jQuery的$.ajax在检测到Content-Type为application/x-www-form-urlencoded时，会自动把传入的data对象序列化为上述格式的字符串，这就是jQuery提交能正常生效的原因。

完整原生实现代码 #

// 通用对象转x-www-form-urlencoded格式工具函数，和jQuery序列化逻辑对齐
function urlEncodeParams(params) {
  return Object.keys(params)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
    .join('&');
}

// 完整AJAX请求逻辑
const xhr = new XMLHttpRequest();
xhr.open('POST', '替换为你的后端接口地址', true);
// 手动设置Content-Type，避免浏览器自动识别为其他格式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
// 设置响应类型为json，对应jQuery的dataType: 'json'配置
xhr.responseType = 'json';

xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功逻辑，xhr.response即为后端返回的JSON对象
    console.log('请求成功', xhr.response);
  } else {
    // 错误处理逻辑
    console.error('请求异常', xhr.status, xhr.response);
  }
};

// 要提交的业务参数
const postData = {
  gcd: '实际gcd值',
  name: '实际name值'
};
// 序列化参数后发送
xhr.send(urlEncodeParams(postData));

后端适配说明 #

上述提交方式和jQuery的$.ajax提交效果完全一致，Spring Boot控制器不需要做任何修改，沿用原来的接收逻辑即可，示例如下：

@PostMapping("/你的接口路径")
public Object test(String gcd, String name) {
  // 原有业务逻辑
  return null;
}

内容的提问来源于stack exchange，提问作者Brian Antiqueña