Javascript window.open 使用 POST 传递值

IT技术 javascript post get window
2021-01-25 16:12:14

我有一个 javascript 函数,它使用 window.open 调用另一个页面并返回结果。

这是我的代码部分:

var windowFeatures = "status=0, toolbar=0, location=0, menubar=0, directories=0, resizable=1, scrollbars=1";
window.open ('http://www.example.com/index.php?p=view.map&coords=' + encodeURIComponent(coords), 'JobWindow', windowFeatures);

我现在的问题是我传递了太多数据供 GET 处理,我需要使用 POST 方法传递它。

如何转换上面的代码以使用 POST 方法打开页面而不在整个页面上实现表单(页面列出了 100 个带有供应商列表的订单 - 我正在尝试映射供应商)

6个回答

我使用了上述的变体,但我没有打印 html,而是构建了一个表单并将其提交给 3rd 方 url:

    var mapForm = document.createElement("form");
    mapForm.target = "Map";
    mapForm.method = "POST"; // or "post" if appropriate
    mapForm.action = "http://www.url.com/map.php";

    var mapInput = document.createElement("input");
    mapInput.type = "text";
    mapInput.name = "addrs";
    mapInput.value = data;
    mapForm.appendChild(mapInput);

    document.body.appendChild(mapForm);

    map = window.open("", "Map", "status=0,title=0,height=600,width=800,scrollbars=1");

if (map) {
    mapForm.submit();
} else {
    alert('You must allow popups for this map to work.');
}
@Mancy 感谢您的评论,没想到 Firefox
2021-03-20 16:12:14
@rut 将数据作为 GET 和 POST 命令发送之间存在差异。问题是关于使用 POST 命令发送数据。
2021-03-20 16:12:14
如果你不担心你的数据| window.open('xxx_url.php?xxx_var='+xxx_var+'&xxx2_var='+xxx2_var, '_blank');
2021-03-24 16:12:14
@Fedor 删除该行将导致 firefox 上出现空白弹出窗口
2021-04-13 16:12:14
我认为document.body.appendChild(mapForm);这里是多余的,可以安全地省略以免使 DOM 混乱。
2021-04-14 16:12:14

谢谢php-b-grader我改进了代码,没有必要使用window.open()目标已经在表单中指定了

// Create a form
var mapForm = document.createElement("form");
mapForm.target = "_blank";    
mapForm.method = "POST";
mapForm.action = "abmCatalogs.ftl";

// Create an input
var mapInput = document.createElement("input");
mapInput.type = "text";
mapInput.name = "variable";
mapInput.value = "lalalalala";

// Add the input to the form
mapForm.appendChild(mapInput);

// Add the form to dom
document.body.appendChild(mapForm);

// Just submit
mapForm.submit();

对于目标选项 --> w3schools - 目标

OP 有大量的 windowFeatures 传递给弹出窗口。这对于您的解决方案是不可能的。只有基于 window.open() 的解决方案才能优雅地做到这一点
2021-03-19 16:12:14

值得一提的是,这里是之前提供的封装在函数中的代码。

openWindowWithPost("http://www.example.com/index.php", {
    p: "view.map",
    coords: encodeURIComponent(coords)
});

函数定义:

function openWindowWithPost(url, data) {
    var form = document.createElement("form");
    form.target = "_blank";
    form.method = "POST";
    form.action = url;
    form.style.display = "none";

    for (var key in data) {
        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);
}
document.body.removeChild(form); 对我来说,这一行确保输入字段被隐藏
2021-03-27 16:12:14
恕我直言,这是最好的答案。请注意,它负责在发送后删除表单,清理 DOM。它也被写成一个随时可用的函数。干得好
2021-04-05 16:12:14
这样做的问题是您不能像使用 window.open() 那样传递 windowFeatures
2021-04-06 16:12:14

感谢 php-b-grader !

在 window.open 使用 POST 传递值的通用函数下方:

function windowOpenInPost(actionUrl,windowName, windowFeatures, keyParams, valueParams) 
{
    var mapForm = document.createElement("form");
    var milliseconds = new Date().getTime();
    windowName = windowName+milliseconds;
    mapForm.target = windowName;
    mapForm.method = "POST";
    mapForm.action = actionUrl;
    if (keyParams && valueParams && (keyParams.length == valueParams.length)){
        for (var i = 0; i < keyParams.length; i++){
        var mapInput = document.createElement("input");
            mapInput.type = "hidden";
            mapInput.name = keyParams[i];
            mapInput.value = valueParams[i];
            mapForm.appendChild(mapInput);

        }
        document.body.appendChild(mapForm);
    }


    map = window.open('', windowName, windowFeatures);
if (map) {
    mapForm.submit();
} else {
    alert('You must allow popups for this map to work.');
}}

尽管这个问题是很久以前的问题,但感谢所有帮助我解决类似问题的投入。我还根据其他人的答案进行了一些修改,并将多个输入/值转换为单个对象(json);并希望这对某人有所帮助。

js:

//example: params={id:'123',name:'foo'};

mapInput.name = "data";
mapInput.value = JSON.stringify(params); 

php:

$data=json_decode($_POST['data']); 

echo $data->id;
echo $data->name;