如何用JavaScript实现按钮跳转至PUT/POST接口并传递请求体

直接通过动态创建表单并提交的方式就能满足需求，这种方式会自动携带浏览器Cookie，无需依赖Fetch API，同时可以模拟PUT请求（借助后端普遍支持的_method字段）。

具体实现代码 #

1. 保持按钮结构不变：

<button class="delivery-orders-button" onclick="markDone(${order.order_id})">Dispatch order</button>

2. 实现markDone函数：

function markDone(orderId) {
  // 创建表单元素
  const form = document.createElement('form');
  // 设置表单提交地址（替换为你的PUT接口URL）
  form.action = '/api/orders/dispatch';
  // 表单默认用POST提交，配合_method字段模拟PUT
  form.method = 'POST';
  // 设置表单为隐藏，避免页面闪现
  form.style.display = 'none';

  // 添加模拟PUT请求的隐藏字段（多数后端框架支持该字段识别请求方法）
  const methodInput = document.createElement('input');
  methodInput.type = 'hidden';
  methodInput.name = '_method';
  methodInput.value = 'PUT';
  form.appendChild(methodInput);

  // 添加order_id到请求体
  const orderIdInput = document.createElement('input');
  orderIdInput.type = 'hidden';
  orderIdInput.name = 'order_id';
  orderIdInput.value = orderId;
  form.appendChild(orderIdInput);

  // 将表单添加到页面并提交
  document.body.appendChild(form);
  form.submit();
  // 提交后移除表单（可选，避免DOM冗余）
  document.body.removeChild(form);
}

关键说明 #

• 原生HTML表单仅支持GET和POST方法，通过添加name="_method"的隐藏字段，后端可以识别为PUT请求（常见于Spring Boot、Ruby on Rails等框架）。
• 表单提交会自动携带当前域名下的所有Cookie，无需额外配置。
• 表单设置为display: none可以避免页面出现不必要的元素闪现。

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