使用JavaScript从按钮触发GET重定向或模拟POST/PUT提交的教程

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

方法一：使用location.href进行GET重定向（带查询参数）

这种方法适用于以下场景：

• 你只需要进行页面导航。
• 服务器端能够处理一个GET请求来执行相应的操作，且数据可以通过URL查询参数传递。
• 数据量较小且不包含敏感信息（因为数据会暴露在URL中）。

实现步骤：

1. HTML 按钮： 在HTML中，创建一个带有onclick事件的按钮，调用一个JavaScript函数并传入所需的数据。

   <button class="delivery-orders-button" onclick="markDoneGet(123)">Dispatch order (GET)</button>

   登录后复制

   这里，123是示例order_id。

2. 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}`;
   }

   登录后复制

3. 服务器端处理： 服务器会收到一个对/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); // 重定向到确认页
   // });

   登录后复制

注意事项：

Quicktools Background Remover

Picsart推出的图片背景移除工具

31

查看详情

• 这种方法发送的是GET请求，不适合用于修改服务器资源的操作（根据HTTP规范，GET请求应该是幂等的和安全的）。
• 数据在URL中可见，不适合传输敏感信息。
• 数据量受限于URL长度。

方法二：通过动态创建和提交隐藏表单模拟POST/PUT请求

当需要发送POST请求（或通过POST模拟PUT/DELETE）并传递数据到请求体中，同时要求全页面刷新时，动态创建并提交一个隐藏的HTML表单是最佳实践。这种方法能够满足“发送数据到请求体”和“像表单一样重定向”的需求。

实现步骤：

1. HTML 按钮： 按钮的HTML结构与方法一类似，但调用的JavaScript函数将不同。

   <button class="delivery-orders-button" onclick="markDonePost(456)">Dispatch order (POST)</button>

   登录后复制

   这里，456是示例order_id。

2. 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); 
   }

   登录后复制

3. 服务器端处理： 服务器会收到一个对/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); // 重定向到确认页
   // });

   登录后复制

注意事项：

• CSRF防护： 对于任何会修改服务器状态的POST请求，都强烈建议实施CSRF（跨站请求伪造）防护。这通常涉及到在表单中包含一个隐藏的CSRF令牌，并在服务器端进行验证。
• PUT/DELETE模拟： 浏览器原生的HTML表单只支持GET和POST方法。为了模拟PUT或DELETE请求，许多Web框架（如Ruby on Rails、Laravel等）采用约定俗成的方式：发送一个POST请求，并在请求体中包含一个名为_method的隐藏字段，其值为PUT或DELETE。服务器端会根据这个字段来路由请求。
• 用户体验： 对于可能导致数据丢失或重要状态改变的操作，考虑在执行前添加确认提示（例如confirm()对话框）。

总结与最佳实践

在从按钮触发页面跳转和数据提交时，选择哪种方法取决于你的具体需求：

• 使用location.href进行GET重定向：

  • 优点： 实现简单、直接。
  • 适用场景： 页面导航、触发无副作用的查询操作、或服务器端明确设计为GET请求处理的轻量级操作。
  • 限制： 只能发送GET请求，数据暴露在URL中，不适合敏感数据或大量数据。

• 使用动态表单模拟POST/PUT：

  • 优点： 能够发送POST请求（或模拟PUT/DELETE），数据在请求体中，更符合HTTP方法语义，适合修改服务器资源。
  • 适用场景： 创建、更新、删除等有副作用的操作，需要发送大量数据，或需要保护数据不暴露在URL中。
  • 限制： 实现略复杂于location.href，需要考虑CSRF防护。

两种方法都能实现全页面刷新，从而确保浏览器Cookie等会话机制的正常传递。在实际开发中，应根据HTTP方法语义、数据敏感性、数据量以及服务器端接口设计来选择最合适的方式。