SpringBoot+jquery实现post提交表单并添加隐藏域属性完成编辑功能

场景

如下页面编辑时:

在选择归属机构时会出现树形结构,所以在提交时需要额外提交一些信息,可以在form中使用input的隐藏域进行存值。

实现

html代码

<div class="modal inmodal" id="orgAddModel" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg" id="addDiv" th:fragment="addDiv">
            <div class="modal-content animated fadeIn">
           &n
<think>我们正在处理用户的问题:如何使用JavaScript或jQuery发起POST请求打开新窗口。 由于HTTP协议的限制,通常我们不能直接通过打开新窗口(window.open)来发送POST请求,因为window.open通常用于GET请求。 但是,我们可以通过一些技巧来实现:例如,创建一个表单,设置表单的method为POST,target为_blank(即新窗口),然后提交表单。 另一种方法是使用AJAX POST请求获取数据,然后在新窗口中写入数据,但这种方法可能会遇到同源策略的限制,且需要处理数据展示。 这里我们主要讨论第一种方法:使用表单提交。因为这种方法简单且兼容性好。 步骤: 1. 创建一个表单(可以动态创建) 2. 设置表单的method为POST,action为请求的URL,target为_blank(新窗口) 3. 添加需要POST的数据作为隐藏的输入字段 4. 将表单添加到DOM中 5. 提交表单 6. 提交后可以移除表单 使用jQuery可以简化这个过程,但也可以使用纯JavaScript。 另外,也可以使用window.open打开一个空白窗口,然后通过AJAX获取数据,再将数据写入新窗口。但这种方法需要处理跨域问题,且如果数据量大可能较慢。 因此,我们优先推荐表单方法。 下面分别用纯JavaScript和jQuery实现: 纯JavaScript实现: ```javascript function postAndOpenWindow(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); } } // 为了兼容性,将表单添加到body中 document.body.appendChild(form); form.submit(); document.body.removeChild(form); // 提交后移除表单 } ``` jQuery实现: ```javascript function postAndOpenWindow(url, data) { var $form = $('<form>', { method: 'POST', action: url, target: '_blank' }); // 添加数据 for (var key in data) { if (data.hasOwnProperty(key)) { $form.append($('<input>', { type: 'hidden', name: key, value: data[key] })); } } $('body').append($form); $form.submit(); $form.remove(); // 提交后移除表单 } ``` 注意:如果数据中包含嵌套对象或数组,上述方法可能不能直接处理,需要将数据扁平化或序列化。但通常我们发送的是简单键值对。 另外,如果目标URL不支持跨域,那么新窗口将显示目标URL的响应(因为表单提交是跨域的,但浏览器允许这样做,因为表单提交是传统方式,不过新窗口将显示目标URL的页面,而不是当前域)。 如果用户需要在新窗口中显示当前域的数据,那么可以考虑第二种方法:使用AJAX获取数据,然后在新窗口中写入。但这种方法要求同源或目标服务器支持CORS。 示例(同源情况): ```javascript function postAndOpenWindowWithAjax(url, data) { // 打开一个空白新窗口 var newWindow = window.open('', '_blank'); // 发送POST请求 $.post(url, data, function(response) { // 将响应写入新窗口 newWindow.document.write(response); newWindow.document.close(); // 确保文档关闭,以便加载资源 }).fail(function() { newWindow.close(); // 如果请求失败,关闭新窗口 alert('请求失败'); }); } ``` 但是,这种方法需要同源策略允许,且新窗口可能会被广告拦截器拦截。另外,如果响应中包含外部资源(如CSS、JS),它们可能会被浏览器阻止加载(因为document.write在加载完的窗口中执行可能会覆盖整个文档,包括之前加载的资源)。因此,这种方法需要谨慎使用。 综上所述,对于大多数情况,使用表单提交是更可靠的方法。 相关问题: 1. 如何防止表单提交方法被广告拦截器拦截? 2. 如何处理跨域POST请求打开新窗口? 3. 在AJAX方法中,如何确保新窗口中的样式和脚本正确加载?</think>### 使用 JavaScript/jQuery 发起 POST 请求打开新窗口 要实现这个功能,核心思路是**创建一个隐藏表单**,通过表单提交触发新窗口打开。以下是两种实现方式: #### 方法 1:纯 JavaScript 实现 ```javascript function postToNewWindow(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); } // 使用示例 postToNewWindow('https://api.example.com/submit', { name: 'John', email: 'john@example.com' }); ``` #### 方法 2:jQuery 实现 ```javascript function postToNewWindow(url, data) { // 创建隐藏表单 const $form = $('<form>', { method: 'POST', action: url, target: '_blank' }).css('display', 'none'); // 添加数据字段 $.each(data, (key, value) => { $('<input>') .attr({ type: 'hidden', name: key }) .val(value) .appendTo($form); }); // 提交表单 $('body').append($form); $form.submit(); $form.remove(); } // 使用示例 postToNewWindow('https://api.example.com/submit', { id: 123, token: 'abcxyz' }); ``` #### 关键点说明: 1. **target="_blank"**:这是在新窗口打开的核心属性 2. **动态表单**:临时创建表单元素提交数据 3. **隐藏元素**:通过 CSS 隐藏表单避免页面闪烁 4. **自动清理**:提交后立即移除表单元素 #### 注意事项: 1. **跨域限制**:目标 URL 需支持跨域访问(CORS 配置) 2. **内容安全**:避免在 POST 数据中传递敏感信息 3. **弹窗拦截**:部分浏览器可能拦截 `window.open()`,但表单提交通常不会被拦截[^3] 4. **数据格式**:复杂数据需先序列化(如 JSON 转字符串) > 此方法通过标准表单提交实现,避免了直接使用 `window.open()` 可能被浏览器拦截的问题[^3]。对于需要处理响应的场景,建议结合 AJAX 和 `window.open()` 实现更精细的控制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值