使用window.location.href传递post数据

Question

当使用window.location.href时,我想将POST数据传递给我正在打开的新页面.这可能使用JavaScript和jQuery吗？

Answer 1

使用window.location.href它无法发送POST请求.

您需要做的是设置一个form包含数据字段的标记action,将表单的属性设置为URL,将method属性设置为POST,然后submit在form标记上调用方法.

Answer 2

在HTML中添加一个表单,如下所示:

<form style="display: hidden" action="/the/url" method="POST" id="form">
  <input type="hidden" id="var1" name="var1" value=""/>
  <input type="hidden" id="var2" name="var2" value=""/>
</form>

并使用JQuery来填充这些值(当然你也可以使用javascript来做类似的事情)

$("#var1").val(value1);
$("#var2").val(value2);

然后最后提交表格

$("#form").submit();

在服务器端,你应该能够让你通过检查发送的数据var1和var2,如何做到这一点取决于你使用的是什么服务器端语言.

Answer 3

简答:不.window.location.href无法传递POST数据.

更令人满意的答案:您可以使用此功能克隆所有表单数据并提交.

var submitMe = document.createElement("form");
submitMe.action = "YOUR_URL_HERE"; // Remember to change me
submitMe.method = "post";
submitMe.enctype = "multipart/form-data";
var nameJoiner = "_";
// ^ The string used to join form name and input name
//   so that you can differentiate between forms when
//   processing the data server-side.
submitMe.importFields = function(form){
    for(k in form.elements){
        if(input = form.elements[k]){
            if(input.type!="submit"&&
                     (input.nodeName=="INPUT"
                    ||input.nodeName=="TEXTAREA"
                    ||input.nodeName=="BUTTON"
                    ||input.nodeName=="SELECT")
                     ){
                var output = input.cloneNode(true);
                output.name = form.name + nameJoiner + input.name;
                this.appendChild(output);
            }
        }
    }
}

• 难道submitMe.importFields(form_element);你们每个人要提交的三种形式.
• 此函数会将每个表单的名称添加到其子输入的名称中(如果您有<input name="email">in <form name="login">,则提交的名称将为login_name.
• 您可以将nameJoiner变量更改为其他内容,_以使其不与输入命名方案冲突.
• 一旦您导入了所有必要的表格,就行了 submitMe.submit();

Answer 4

使用此文件:"jquery.redirect.js"

$("#btn_id").click(function(){
    $.redirect(http://localhost/test/test1.php,
        {
            user_name: "khan",
            city : "Meerut",
            country : "country"
        });
    });
});

请参阅https://github.com/mgalante/jquery.redirect

Answer 5

您是否考虑过简单地使用本地/会话存储？- 或 - 取决于您正在构建的内容的复杂性；你甚至可以使用indexDB。

笔记：

Local storage并且indexDB不安全 - 因此您希望避免在其中存储任何敏感/个人数据（即姓名、地址、电子邮件地址、出生日期等）。

Session Storage对于任何敏感的内容来说，这是一个更安全的选项，它只能由设置项目的源访问，并且在浏览器/选项卡关闭后也会立即清除。

IndexDB稍微复杂一些，并且内置30MB noSQL database于每个浏览器中（但如果用户选择加入，则基本上可以不受限制）-> 下次您使用 Google 文档时，打开 DevTools -> 应用程序 -> IndexDB并达到峰值。[剧透警报：已加密]。

重点关注Local和Session Storage；这些都非常简单易用：

// To Set 
sessionStorage.setItem( 'key' , 'value' );

// e.g.
sessionStorage.setItem( 'formData' , { name: "Mr Manager", company: "Bluth's Frozen Bananas", ...  } );    

// Get The Data 
const fromData = sessionStorage.getItem( 'key' );     

// e.g. (after navigating to next location)
const fromData = sessionStorage.getItem( 'formData' );

// Remove 
sessionStorage.removeItem( 'key' );

// Remove _all_ saved data sessionStorage
sessionStorage.clear( ); 

如果简单不是你的事 - 或者 - 也许你想走出公路并一起尝试不同的方法 - >你可能可以使用shared web worker......你知道，只是为了好玩。

Answer 6

正如在其他答案中所说的那样，无法使用window.location.href发出POST请求，您可以创建一个表单并立即提交它。

您可以使用此功能：

function postForm(path, params, method) {
    method = method || 'post';

    var form = document.createElement('form');
    form.setAttribute('method', method);
    form.setAttribute('action', path);

    for (var key in params) {
        if (params.hasOwnProperty(key)) {
            var hiddenField = document.createElement('input');
            hiddenField.setAttribute('type', 'hidden');
            hiddenField.setAttribute('name', key);
            hiddenField.setAttribute('value', params[key]);

            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();
}

postForm('mysite.com/form', {arg1: 'value1', arg2: 'value2'});

/sf/answers/9379821/