使用 window.location.href 传递文章数据

在使用 window.location.href 时，我希望将 POST 数据传递到正在打开的新页面。使用 JavaScript 和 jQuery 可以做到这一点吗？

289586 次浏览
小开

使用 window.location.href不可能发送 POST 请求。

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

小开

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

<form style="display: none" 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获得您发送的数据，如何做到这一点取决于您使用的是什么服务器端语言。

小开

简短的回答: 不。 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);操作。
  • 这个函数将把每个表单的名称添加到它的子输入的名称中(如果在 <form name="login">中有一个 <input name="email">，那么提交的名称将是 login_name。
  • 您可以将 nameJoiner变量更改为 _以外的其他变量，这样它就不会与您的输入命名方案冲突。
  • 导入所有必要的表单后，执行 submitMe.submit();
小开

可以使用 GET 代替 pass，但不要对重要值使用此方法,

function passIDto(IDval){
window.location.href = "CustomerBasket.php?oridd=" +  IDval ;
}

在 CustomerBasket.php 中

<?php
$value = $_GET["oridd"];
echo  $value;
?>
小开

使用这个文件: “ 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

小开

就这么简单

$.post({url: "som_page.php",
data: { data1: value1, data2: value2 }
).done(function( data ) {
$( "body" ).html(data);
});
});

我必须解决这个问题，使我的应用程序的屏幕锁定，我必须传递作为用户的敏感数据和他工作的网址。然后创建一个执行此代码的函数

小开

您是否考虑过简单地使用本地/会话存储？- 或者-取决于所构建内容的复杂程度; 您甚至可以使用 indexDB。

备注 :

Local storage和 indexDB是不安全的-所以你要避免存储任何敏感/个人数据(即姓名，地址，电子邮件地址，出生日期等)在这些。

对于任何敏感的东西，Session Storage是一个更安全的选项，它只能访问设置项目的原点，并且在关闭浏览器/选项卡后立即清除。

IndexDB稍微复杂一点，是一个内置在每个浏览器中的 30MB noSQL database(但如果用户选择使用，基本上可以是无限制的)-> 下次你使用 Google 文档时，打开你的 DevTools-> application-> 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... 你知道，只是为了好玩。

小开

正如在其他答案中所说，没有办法使用 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'});

Https://stackoverflow.com/a/133997/2965158

小开

我使用了一种非常不同的方法来解决这个问题。我在客户端设置浏览器 cookie，它在设置 window.location.href后一秒钟过期。

这比在 URL 中嵌入参数安全多了。

服务器以 cookie 的形式接收参数，浏览器在参数发送后立即删除它们。

const expires = new Date(Date.now() + 1000).toUTCString()
document.cookie = `oauth-username=user123; expires=${expires}`
window.location.href = `https:foo.com/oauth/google/link`

提交答案