打开地址，以表单方式隐藏请求参数

最新推荐文章于 2023-09-22 17:08:32 发布

原创最新推荐文章于 2023-09-22 17:08:32 发布 · 430 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

前端代码专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript通过表单提交方式在新窗口或当前窗口打开URL的方法。该方法解析URL参数，创建或重用隐藏的表单，并将参数作为表单数据提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**

* 以提交表单的方式打开新窗口

* @param url url地址

* @param isNewWindow 是否新窗口方式打开(默认本窗口打开)

function openWindowWithForm (url, isNewWindow){

var p = url.split("?");

var action = p[0];

var params = p[1].split("&");

var target = isNewWindow ? "_blank" : "_self";

var formId = "hyperlinkForm";

var form;

//如果form已经存在

if($("#" + formId)[0]){

form = $("#" + formId);

form.empty();

}

//在body中创建form

else{

form = $("<form/>", {action: action, method: "post", target: target, id: formId}).appendTo("body");

form.css("display", "none");

}

//添加隐藏参数

if(params.length > 0){

for(var i = 0; i < params.length; i ++){

var param = params[i];

var tmp = param.split("=");

if(tmp.length > 1){

$("<input/>", {type: "hidden", name: tmp[0], value: tmp[1]}).appendTo(form);

}

form.submit();

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

卧龙在野

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Spring MVC隐藏方法：用隐藏字段巧妙模拟PUT和DELETE请求

专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。

11-28

141

Spring MVC 隐藏方法通过在表单中添加隐藏字段，模拟 PUT 和 DELETE 请求，解决浏览器仅支持 GET 和 POST 的限制。通过配置 HiddenHttpMethodFilter，使得请求可以按照 RESTful 风格处理，提高开发效率和灵活性。

form表单中什么隐藏属性可以随表单提交

12-02

form中visibility=hidden的和display=none的表单元素都会随表单提交, 只有disabled=true的元素不随表单提交。

参与评论您还未登录，请先登录后发表或查看评论

关于form表单提交什么隐藏属性也可以提交数据

LzwGlory的专栏

01-26

1238

form中visibility=hidden的和display=none的表单元素都会随表单提交, 只有disabled=true的元素不随表单提交。

form表单post请求保护隐藏秘钥

weixin_34247155的博客

07-25

599

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form acti

隐藏表单提交的参数

TjeCodeBear的博客

11-27

3007

<input type="hidden" name="id" value="001"> request获取IP地址 request.getRemoteAddr(); 还有一种方式就是readOnly

隐藏表单技术

m0_50897734的博客

11-03

2503

利用HTML的hidden属性，将客户端的信息，在用户不察觉的情形下，随着请求一起发送给服务器处理。例如：<input type="hidden" name="userID" value="15"> 编写JSP页面login.jsp,在该页面中通过表单向名字为login的Servlet对象(由LoginServlet 类负责创建)提交用户名，login 将用户名以隐藏表单域的形式提交给另一个 Servlet 对象greet (由GreetServlet 类负责创建)，greet 将logi

layui使用form表单实现post请求页面跳转的方法

10-16

通过这种方式，layui的form表单可以安全地发送POST请求，将敏感数据隐藏在请求体中，防止信息在URL中泄露。同时，这种方式也使得页面跳转更加灵活，可以根据服务器端返回的结果来决定跳转到哪个页面。在实际项目中，...

window.open 以post方式传递参数示例代码

12-10

在JavaScript中，`window.open`方法通常用于打开一个新的浏览器窗口或者标签页，而这个方法默认是以GET方式加载页面。然而，如果我们需要以POST方式传递参数，就需要采用一些额外的技巧。下面将详细解释如何实现`...

JS实现使用POST方式发送请求

12-03

在JavaScript中，我们通常使用`window.location.href`来实现页面的跳转，这是一种基于GET方法的请求方式。GET请求的特点是简单直接，但其缺点在于，如果传递的参数较多或者包含敏感信息，这些数据会清晰地显示在URL...

巧用html的hidden全局属性传递表单隐藏参数

>Initialization...

06-06

1万+

巧用html的hidden全局属性传递表单隐藏参数

from表单取消提交隐藏的标签属性值

小馒头味的博客

11-13

3978

from表单取消提交隐藏的标签属性值 form表单提交被visibility=hidden和display=none修饰的元素都会随表单提交只有disabled=true标记的元素不随表单提交 <table > <tr> <td >结论</td> <td> <label>通过</label>

地址栏隐藏后面的action名和路径及参数

rui276933335的专栏

07-28

7593

1、项目中客户提出要隐藏掉地址解析后的action名，找了半天也试了半天，有的直接不可以，有的本地可以跑，发布到线上直接闪屏。 2、询问一些网友给出了下面的方案不说了直接贴代码 3、 4,、此方法会隐藏所有的action名、路径和参数，只是HTML中的一个框架标签，在默认的首页中嵌入要访问的首页

隐形变量赋值,隐藏参数，隐藏传参

飞火龙在天的博客

04-23

1777

思想：先把变量赋给隐藏的input或其他的，然后从这个隐藏的input里获取值，相当于建立了个中间变量，转了一道弯 jsp: pageEncoding="UTF-8"%> function submitDeviceForm(cmd) { document.getElementById("command").value = cmd; $("form#deviceFo

html中用form往jsp隐式传递参数

linchuan1234567的博客

08-15

642

out.println("");

用javascript怎么实现一个form的隐藏与显示

最新发布

07-11

<think>我们参考用户提供的引用内容，特别是引用[2]和引用[3]的方法，来实现在新窗口中发送POST请求并传递参数，同时在新页面中获取参数。思路： 1. 创建一个隐藏的表单，设置method为post，action为目标URL。 2. 将需要传递的参数通过隐藏的input添加到表单中。 3. 将表单添加到当前文档的body中。 4. 使用window.open打开一个新窗口（可以立即打开，也可以先打开一个空白窗口，然后在新窗口的文档中写入表单并提交，取决于需求）。 5. 提交表单，这样新窗口就会以POST方式接收到数据。 6. 在新页面中，我们可以通过后端（如Java、PHP等）接收POST参数，或者在前端通过JavaScript获取（注意，由于是新页面，我们通常在后端处理）。有两种常见方法：方法一（在父窗口创建表单并提交，同时打开新窗口）： - 先创建一个表单，设置target为"_blank"，这样提交表单时会打开新窗口。 - 然后提交表单，这样新窗口就会以POST方式打开。方法二（先打开新窗口，然后在新窗口的文档中写入表单并提交）： - 先使用window.open打开一个新窗口（此时是GET请求，可能是一个空白页）。 - 然后在新窗口的文档中写入一个表单（包含参数），并立即提交这个表单，这样新窗口就会重新加载，以POST方式请求目标URL。根据用户需求，我们选择方法二，因为用户要求使用window.open，并且在新页面中获取参数。但注意，方法二中，新窗口会先打开一个空白页，然后立即被表单提交的请求覆盖（用户可能会看到闪烁）。为了避免闪烁，我们可以让新窗口打开一个等待页面，然后立即提交表单。下面我们分别给出两种方法的代码示例，并说明如何在新页面中获取参数。方法一：在父窗口创建表单，设置target为_blank，然后提交（这种方法不会先打开空白页）步骤： 1. 创建form元素 2. 设置method为post，action为目标URL，target为"_blank" 3. 添加隐藏的input元素作为参数 4. 将form添加到body中 5. 提交表单方法二：先打开新窗口，然后在新窗口的文档中写入表单并提交（用户要求结合window.open，所以这里我们用这种方法）我们参考引用[3]的代码，但是注意，引用[3]的代码中，先打开了目标URL（此时是GET请求），然后立即覆盖该窗口的文档内容为一个表单，并提交。这样会导致两次请求：第一次GET请求打开目标URL，第二次POST请求（提交表单）。为了避免两次请求，我们可以让新窗口打开一个空白页（例如：about:blank），然后再写入表单并提交到目标URL。具体步骤（方法二）： 1. 使用window.open打开一个空白窗口（例如：url='about:blank'）。 2. 然后在这个新窗口的document中写入一个表单，表单的action设置为实际要提交的URL，method为post，并添加隐藏的input参数。 3. 然后提交这个表单。但是注意：由于同源策略，如果新窗口的URL与父窗口不同源，则无法操作新窗口的document。所以方法二要求目标URL与当前页面同源（或者使用跨域技术，但跨域情况下操作其他窗口的document是被禁止的）。因此，如果目标URL是跨域的，我们只能使用方法一（设置target）或者使用其他方法（如方法一）。因此，我们优先考虑方法一，因为方法一不受同源策略限制（因为表单提交可以跨域，只是不能读取跨域窗口的内容）。但是用户要求使用window.open，所以如果用户需要跨域，我们只能先打开一个空白窗口（同源则没问题），然后写入表单并提交。但跨域情况下写入表单会被禁止。所以，我们给出两种方法的代码，并说明适用场景。方法一代码（推荐，无跨域问题）： ```javascript function openWithPost(url, data) { var form = document.createElement('form'); form.method = 'post'; form.action = url; form.target = '_blank'; // 这样提交会打开新窗口 // 添加参数 for (var key in data) { if (data.hasOwnProperty(key)) { var input = document.createElement('input'); input.type = 'hidden'; input.name = key; input.value = data[key]; form.appendChild(input); } } document.body.appendChild(form); form.submit(); document.body.removeChild(form); // 提交后移除表单 } ``` 方法二代码（同源情况下可用）： ```javascript function openWithPostInNewWindow(url, data) { // 先打开一个空白窗口 var win = window.open('about:blank', '_blank'); // 创建表单的HTML字符串 var formHtml = '<form id="postForm" method="post" action="' + url + '">'; for (var key in data) { if (data.hasOwnProperty(key)) { formHtml += '<input type="hidden" name="' + key + '" value="' + data[key] + '" />'; } } formHtml += '</form>'; // 写入新窗口的文档 win.document.write(formHtml); win.document.getElementById('postForm').submit(); } ``` 注意：方法二在跨域时，如果新窗口的域名与当前页面不同，那么写入新窗口的文档会报错（跨域安全限制）。因此，如果目标URL与当前页面不同源，请使用方法一。在新页面中获取参数：由于是POST请求，参数在请求体中，所以不能通过URL获取（GET参数在URL中）。因此，我们需要在服务器端获取POST参数。例如，在Java（SpringMVC）中，我们可以这样获取： ```java @RequestMapping("/targetUrl") public ModelAndView handlePostRequest(@RequestParam("param1") String param1, @RequestParam("param2") String param2) { // 处理参数 } ``` 或者使用HttpServletRequest： ```java @RequestMapping("/targetUrl") public ModelAndView handlePostRequest(HttpServletRequest request) { String param1 = request.getParameter("param1"); String param2 = request.getParameter("param2"); } ``` 在PHP中： ```php <?php $param1 = $_POST['param1']; $param2 = $_POST['param2']; ?> ``` 如果用户希望在新窗口的前端JavaScript中获取POST参数，这是不可能的，因为JavaScript无法直接读取POST请求体（出于安全原因）。所以只能在服务器端获取，然后通过服务器将参数渲染到页面中（例如，将参数写入到隐藏字段中，或者作为JavaScript变量输出到页面），这样前端才能使用。总结： 1. 根据是否跨域选择方法一或方法二（跨域选方法一，同源两种都可以）。 2. 在新页面中，通过服务器端代码获取POST参数。因此，我们给出一个完整的示例（以方法一为例，因为更通用）：假设我们要传递参数：projectId=123, stage=2，目标URL为：'http://example.com/target' 调用： ```javascript openWithPost('http://example.com/target', { projectId: 123, stage: 2 }); ``` 在目标页面（http://example.com/target）的服务器端，我们可以获取参数projectId和stage。注意：如果目标页面是第三方页面，且该页面没有提供POST接口，那么这种方法可能不适用，因为需要目标页面支持POST请求处理。相关问题： 1. 如何在新窗口中使用JavaScript获取POST参数？ 2. window.open打开新窗口时，如何避免被浏览器拦截？ 3. 除了表单提交，还有哪些方法可以实现POST方式打开新窗口？ 4. 如何在新窗口中避免表单重复提交？</think>### 使用 window.open 发送 POST 请求并获取参数要实现通过 `window.open` 发送 POST 请求并在新页面获取参数，需要结合表单技术。以下是具体步骤和代码示例： #### 方法一：动态创建表单（推荐） ```javascript function openPostWindow(url, data) { // 创建临时表单 const form = document.createElement('form'); form.method = 'POST'; form.action = url; form.target = '_blank'; // 在新窗口打开 // 添加隐藏参数 for (const key in data) { const input = document.createElement('input'); input.type = 'hidden'; input.name = key; input.value = data[key]; form.appendChild(input); } // 提交表单 document.body.appendChild(form); form.submit(); document.body.removeChild(form); } // 使用示例 openPostWindow('/target-page', { userId: '12345', token: 'abcde' }); ``` #### 方法二：在新窗口写入表单 ```javascript function openPostWindow(url, data) { // 先打开空白窗口 const win = window.open('', '_blank'); // 构建表单 HTML let formHtml = `<form method="POST" action="${url}">`; for (const key in data) { formHtml += `<input type="hidden" name="${key}" value="${data[key]}">`; } formHtml += '</form>'; // 写入新窗口并提交 win.document.write(formHtml); win.document.forms[0].submit(); } ``` #### 新页面获取参数（后端示例） **Java Spring Boot 控制器：** ```java @PostMapping("/target-page") public String handlePostRequest( @RequestParam String userId, @RequestParam String token) { System.out.println("收到参数 - userId: " + userId); System.out.println("收到参数 - token: " + token); return "result-page"; // 返回结果页面 } ``` **PHP 后端：** ```php <?php $userId = $_POST['userId']; $token = $_POST['token']; echo "接收到的参数：userId=$userId, token=$token"; ?> ``` #### 关键说明： 1. **POST 请求原理** 通过创建隐藏表单并设置 `method="POST"`，浏览器会自动将参数放入请求体而非 URL[^2][^3]。 2. **新窗口处理** `form.target = '_blank'` 确保在新窗口提交，`window.open` 返回的窗口对象可直接操作 DOM[^3]。 3. **参数获取限制** POST 参数**只能通过后端获取**，前端 JavaScript 无法直接读取请求体内容[^1][^4]。 4. **跨域限制** 如果目标页面跨域，需要目标服务器配置 CORS 头部： ```http Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST ``` #### 注意事项： - 使用 `document.write()` 会覆盖新窗口原有内容，仅适用于全新窗口 - 参数值需进行 URL 编码防止特殊字符问题 - 敏感数据应配合 HTTPS 使用