本教程详细介绍了如何通过JavaScript从按钮触发客户端重定向，以实现类似表单提交的效果，同时确保浏览器Cookie的正常处理。文章涵盖了两种主要方法：一是使用location.href进行带查询参数的GET重定向，适用于简单的导航或GET请求触发的动作；二是通过动态创建和提交隐藏表单来模拟POST或PUT/DELETE请求，以实现数据在请求体中的传输和全页面刷新。
在Web开发中，我们经常需要从一个按钮点击事件触发页面跳转，并在此过程中传递一些数据到服务器。这种需求通常伴随着一个特定的场景：需要像传统表单提交那样进行全页面刷新，而不是通过AJAX（如fetch API）进行异步请求。避免使用fetch等API的一个常见原因是，全页面刷新能够更好地保证浏览器Cookie等会话机制的正常传递和处理，这对于某些认证或状态管理流程至关重要。
用户可能期望通过一个按钮触发一个“PUT”或“POST”请求，并将数据（例如一个order_id）发送到服务器的请求体中。然而，直接使用JavaScript的location.href进行重定向，本质上是发起一个GET请求。为了满足不同的HTTP方法和数据传输需求，我们需要理解不同的实现策略。
首先需要明确，浏览器中的location.href或window.location属性的赋值操作，总是会触发一个GET请求。这意味着，如果你想直接“重定向”到一个URL并以PUT或POST方法发送数据到请求体，location.href是无法直接实现的。要实现PUT/POST请求并伴随全页面刷新，标准的Web机制是使用HTML <form> 元素。
立即学习“Java免费学习笔记（深入）”；
这种方法适用于以下场景：
实现步骤：
HTML 按钮： 在HTML中，创建一个带有onclick事件的按钮，调用一个JavaScript函数并传入所需的数据。
<button class="delivery-orders-button" onclick="markDoneGet(123)">Dispatch order (GET)</button>
这里，123是示例order_id。
JavaScript 函数： 在JavaScript函数中，使用location.href属性拼接目标URL和查询参数。
function markDoneGet(order_id) {
// 构建目标URL，将order_id作为查询参数
const targetUrl = '/dispatch_order_get?order_id=' + order_id;
// 执行GET重定向
location.href = targetUrl;
// 提示：你也可以使用模板字符串
// location.href = `/dispatch_order_get?order_id=${order_id}`;
}服务器端处理： 服务器会收到一个对/dispatch_order_get路径的GET请求，并且可以通过解析URL的查询字符串来获取order_id。例如，在Node.js (Express) 中：
// app.get('/dispatch_order_get', (req, res) => {
// const orderId = req.query.order_id; // 获取查询参数
// // ... 处理订单派发逻辑 ...
// res.redirect('/order_confirmation?id=' + orderId); // 重定向到确认页
// });注意事项：
当需要发送POST请求（或通过POST模拟PUT/DELETE）并传递数据到请求体中，同时要求全页面刷新时，动态创建并提交一个隐藏的HTML表单是最佳实践。这种方法能够满足“发送数据到请求体”和“像表单一样重定向”的需求。
实现步骤：
HTML 按钮： 按钮的HTML结构与方法一类似，但调用的JavaScript函数将不同。
<button class="delivery-orders-button" onclick="markDonePost(456)">Dispatch order (POST)</button>
这里，456是示例order_id。
JavaScript 函数： 此函数将负责创建、配置、提交和清理一个隐藏的表单。
function markDonePost(order_id) {
// 1. 创建一个临时的隐藏表单
const form = document.createElement('form');
form.method = 'POST'; // 设置请求方法为POST
form.action = '/dispatch_order_post'; // 设置目标URL
form.style.display = 'none'; // 隐藏表单
// 2. 创建一个隐藏的输入字段来传递数据
const input = document.createElement('input');
input.type = 'hidden';
input.name = 'order_id'; // 字段名，服务器端将以此获取数据
input.value = order_id; // 字段值
// 3. 将输入字段添加到表单中
form.appendChild(input);
// 4. 如果需要模拟PUT/DELETE请求 (许多框架支持通过_method字段)
// const methodInput = document.createElement('input');
// methodInput.type = 'hidden';
// methodInput.name = '_method'; // 例如Laravel、Rails等框架
// methodInput.value = 'PUT'; // 或 'DELETE'
// form.appendChild(methodInput);
// 5. 将表单添加到文档体中（必须在提交前添加到DOM）
document.body.appendChild(form);
// 6. 提交表单
form.submit();
// 7. (可选) 提交后移除表单，防止DOM中残留不必要的元素
// 注意：由于页面会立即刷新，此处的移除操作可能不会执行，
// 或者在页面卸载前执行，影响不大。
// setTimeout(() => document.body.removeChild(form), 0);
}服务器端处理： 服务器会收到一个对/dispatch_order_post路径的POST请求，并且可以通过请求体来获取order_id。例如，在Node.js (Express) 中，结合body-parser中间件：
// const express = require('express');
// const bodyParser = require('body-parser');
// const app = express();
// app.use(bodyParser.urlencoded({ extended: true })); // 用于解析URL编码的请求体
// app.post('/dispatch_order_post', (req, res) => {
// const orderId = req.body.order_id; // 从请求体获取数据
// // ... 处理订单派发逻辑 ...
// res.redirect('/order_confirmation?id=' + orderId); // 重定向到确认页
// });注意事项：
在从按钮触发页面跳转和数据提交时，选择哪种方法取决于你的具体需求：
使用location.href进行GET重定向：
使用动态表单模拟POST/PUT：
两种方法都能实现全页面刷新，从而确保浏览器Cookie等会话机制的正常传递。在实际开发中，应根据HTTP方法语义、数据敏感性、数据量以及服务器端接口设计来选择最合适的方式。
以上就是使用JavaScript从按钮触发GET重定向或模拟POST/PUT提交的教程的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
871
收藏
