本教程详细讲解如何通过JavaScript动态创建并提交隐藏表单，以实现从按钮点击触发的PUT或POST请求重定向，并携带请求体数据。这种方法无需使用`fetch` API，能够满足浏览器自动处理Cookie的需求，为需要模拟完整表单提交行为的场景提供了有效的解决方案。
在Web开发中，我们经常需要通过按钮点击来触发某个操作，并将用户重定向到另一个页面，同时向服务器发送数据。对于简单的GET请求和URL参数传递，直接使用window.location.href = 'your_url?param=value'即可。然而，当需求涉及到发送PUT或POST请求，并且需要将数据放入请求体中，同时希望浏览器像提交表单一样处理（例如自动携带Cookie并触发页面跳转），location.href就不再适用。
window.location.href默认只会发起GET请求，并且数据只能通过URL查询字符串传递，无法将数据放置在请求体中。虽然现代前端开发倾向于使用fetch API或XMLHttpRequest来发送异步请求（如PUT/POST），但这些API通常用于无页面跳转的后台数据交换。如果明确要求“像表单一样重定向”并利用浏览器处理Cookie的机制，那么动态创建并提交HTML表单是更符合这种特定场景需求的解决方案。
为了实现通过JavaScript按钮触发PUT或POST请求重定向，并将数据作为请求体发送（或模拟请求体），我们可以利用HTML表单的特性：在JavaScript中动态创建一个隐藏的zuojiankuohaophpcnform>元素，配置其method、action和数据字段，然后通过程序化方式提交它。
立即学习“Java免费学习笔记（深入）”；
这种方法的原理如下：
假设我们有一个“派发订单”按钮，点击后需要向/orders/dispatch这样的URL发送一个PUT请求，并携带order_id。
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);
}在后端，当接收到一个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”所期望的行为。
// ... 在添加orderIdInput和methodInput之后
const csrfTokenInput = document.createElement('input');
csrfTokenInput.type = 'hidden';
csrfTokenInput.name = '_token'; // 或其他框架定义的CSRF令牌名称
csrfTokenInput.value = '{{ csrf_token() }}'; // 假设这是一个后端模板变量
form.appendChild(csrfTokenInput);通过JavaScript动态创建并提交隐藏表单，是解决“通过按钮触发PUT/POST请求重定向并携带请求体数据，同时利用浏览器Cookie处理机制”这一特定需求的高效且兼容性良好的方法。它模拟了传统的表单提交行为，使得后端能够像处理普通表单一样接收和解析数据，并自动处理Cookie。在需要全页面跳转且不使用fetch API的场景下，这种技术提供了强大的功能，但务必结合CSRF防护等安全措施来确保应用程序的健壮性。
以上就是JavaScript按钮实现PUT/POST重定向与数据提交：模拟表单行为的教程的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
510
收藏
