jQuery post 打开新窗口

本文介绍了一种使用JavaScript通过POST方法打开新浏览器窗口的方法。该方法创建了一个隐藏的表单,将所需参数作为隐藏字段添加到表单中,并通过触发表单提交来实现页面的POST请求。此外,还展示了如何设置新窗口的尺寸。
//使用POST方式打开界面
function doOpenPostWin(url, args, name, windowParam) {
    //创建表单对象
    var _form = $("<form></form>", {
        'id': 'tempForm',
        'method': 'post',
        'action': url,
        'target': name,
        'style': 'display:none'
    }).appendTo($("body"));
    //将隐藏域加入表单
    for (var i in args) {
        _form.append($("<input>", { 'type': 'hidden', 'name': args[i].name, 'value': args[i].value }));
    }
    //绑定提交触发事件
    _form.bind('submit', function() {
        window.open("about:blank", name, windowParam);
    });
    //触发提交事件
    _form.trigger("submit");
    //表单删除
    _form.remove();
}

调用

var windowParam = "height=510,width=750";

    doOpenPostWin(sPath, [{ name: "CgPlanGUID", value: arrCgplanGUID.join(",")}], "新增采购计划合并", windowParam);

 

转载于:https://www.cnblogs.com/KingUp/p/5729456.html

<think>我们正在处理用户的问题:如何使用JavaScriptjQuery发起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获取数据,再将数据写入新窗口。但这种方法需要处理跨域问题,且如果数据量大可能较慢。 因此,我们优先推荐表单方法。 下面分别用纯JavaScriptjQuery实现: 纯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
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值