JavaScript按钮实现PUT/POST重定向与数据提交：模拟表单行为的教程

立即学习“Java免费学习笔记（深入）”；

这种方法的原理如下：

1. 创建表单元素： 使用document.createElement('form')创建一个新的表单。
2. 配置表单属性：
   • action：设置为目标URL，即请求将发送到的地址。
   • method：设置为POST。由于标准的HTML表单只原生支持GET和POST方法，对于PUT或DELETE请求，通常需要通过一个名为_method的隐藏字段来模拟，由后端框架（如Laravel, Ruby on Rails等）解析并转换为相应的HTTP方法。
   • target（可选）：如果需要在新窗口或iframe中打开，可以设置。
3. 添加数据字段： 对于需要发送的数据（例如order_id），创建隐藏的元素，并设置其name和value属性。
4. 添加到DOM： 将创建的表单添加到文档的中，使其成为页面的一部分。
5. 提交表单： 调用表单元素的submit()方法，这将触发浏览器执行表单提交，完成页面重定向。
6. 清理： 提交后，为了保持DOM整洁，可以移除该隐藏表单。

示例代码：实现订单派发功能

假设我们有一个“派发订单”按钮，点击后需要向/orders/dispatch这样的URL发送一个PUT请求，并携带order_id。

可灵大模型

可灵大模型（Kling）是由快手大模型团队自研打造的视频生成大模型

385

查看详情

HTML 按钮：

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

JavaScript 函数 markDone：

/**
 * 通过动态创建并提交隐藏表单的方式，实现PUT请求重定向。
 * 这种方法模拟了传统的表单提交行为，自动携带浏览器Cookie，
 * 并将数据作为表单字段发送，适合需要页面跳转的场景。
 *
 * @param {number} orderId 要派发的订单ID。
 */
function markDone(orderId) {
    const targetUrl = '/orders/dispatch'; // 目标URL，例如后端处理订单派发的接口
    const form = document.createElement('form');

    // 配置表单属性
    form.method = 'POST'; // HTML表单只原生支持GET和POST。为了模拟PUT，我们将使用POST方法，并通过隐藏字段传递真实意图。
    form.action = targetUrl;
    form.style.display = 'none'; // 隐藏表单，用户不可见

    // 添加订单ID作为隐藏字段
    const orderIdInput = document.createElement('input');
    orderIdInput.type = 'hidden';
    orderIdInput.name = 'order_id'; // 后端将通过此名称获取订单ID
    orderIdInput.value = orderId;
    form.appendChild(orderIdInput);

    // 模拟PUT请求：添加一个名为_method的隐藏字段，后端框架会识别它并将其解释为PUT请求。
    // 许多后端框架（如Laravel, Rails, Spring等）都支持这种约定。
    const methodInput = document.createElement('input');
    methodInput.type = 'hidden';
    methodInput.name = '_method';
    methodInput.value = 'PUT'; // 告知后端这是一个PUT请求
    form.appendChild(methodInput);

    // 可选：如果需要发送其他数据，可以继续添加隐藏的input字段
    // const anotherDataInput = document.createElement('input');
    // anotherDataInput.type = 'hidden';
    // anotherDataInput.name = 'status';
    // anotherDataInput.value = 'dispatched';
    // form.appendChild(anotherDataInput);

    // 将表单添加到文档体中
    document.body.appendChild(form);

    // 提交表单，触发页面重定向
    form.submit();

    // 提交后，可以移除表单以保持DOM整洁，但由于页面会重定向，这一步不是强制的。
    // 如果表单提交是异步的（例如提交到iframe），则需要手动移除。
    // setTimeout(() => {
    //     document.body.removeChild(form);
    // }, 0);
}

后端处理与RESTful约定

在后端，当接收到一个POST请求但请求体中包含_method=PUT（或_method=DELETE）时，后端框架通常会根据这个约定来解析请求的真实HTTP方法。例如，在PHP的Laravel框架中，路由定义可以像这样：

Route::put('/orders/dispatch', 'OrderController@dispatch');

当前端通过上述JavaScript代码提交表单时，Laravel会识别_method=PUT并将其路由到OrderController的dispatch方法，同时可以通过request('order_id')或request()->input('order_id')获取到订单ID。

Cookie处理： 这种通过表单提交的方式，浏览器会自动将与目标域相关的Cookie包含在请求头中发送给服务器，这正是用户原始需求中“检查浏览器Cookie”所期望的行为。

注意事项与最佳实践

1. 安全性（CSRF防护）： 当处理PUT/POST请求时，尤其涉及到状态变更的操作，务必实施CSRF（跨站请求伪造）防护。在上述动态创建的表单中，应添加一个隐藏的CSRF令牌字段。例如，在许多框架中，可以通过后端生成并嵌入到页面中的令牌来完成：

   // ... 在添加orderIdInput和methodInput之后
   const csrfTokenInput = document.createElement('input');
   csrfTokenInput.type = 'hidden';
   csrfTokenInput.name = '_token'; // 或其他框架定义的CSRF令牌名称
   csrfTokenInput.value = '{{ csrf_token() }}'; // 假设这是一个后端模板变量
   form.appendChild(csrfTokenInput);

   登录后复制
2. 用户体验： 由于表单提交会导致页面重定向，用户可能会经历短暂的白屏或加载状态。为了提升用户体验，可以在markDone函数开始时显示一个加载指示器（例如，禁用按钮、显示旋转图标），并在页面加载新内容后由浏览器自动清除。
3. 替代方案（Fetch API）： 如果不需要全页面重定向，而是希望在后台异步完成操作并更新当前页面部分内容，那么fetch API是更现代、更灵活的选择。它允许你精确控制请求头、请求体，并以Promise的方式处理响应。但请注意，fetch API本身不会导致页面重定向，需要你手动处理响应后的页面状态更新或导航。本教程专注于满足“表单式重定向”的特定需求。
4. 浏览器兼容性： 动态创建和提交表单是Web标准的一部分，具有非常好的浏览器兼容性，可以在几乎所有现代浏览器中正常工作。

总结

通过JavaScript动态创建并提交隐藏表单，是解决“通过按钮触发PUT/POST请求重定向并携带请求体数据，同时利用浏览器Cookie处理机制”这一特定需求的高效且兼容性良好的方法。它模拟了传统的表单提交行为，使得后端能够像处理普通表单一样接收和解析数据，并自动处理Cookie。在需要全页面跳转且不使用fetch API的场景下，这种技术提供了强大的功能，但务必结合CSRF防护等安全措施来确保应用程序的健壮性。