通过window.location.href传递帖子数据


113

使用window.location.href时,我想将POST数据传递给我要打开的新页面。使用JavaScript和jQuery是否可行?


11
设置window.location.href对新URL(而不是POST)执行GET请求。
Chetan S

Answers:


85

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

您要做的是设置一个form带有数据字段的标签action,将表单的属性设置为URL,将method属性设置为POST,然后submitform标签上调用方法。


我有来自3种不同表单的数据,并且我试图将所有3种表单发送到同一页面,所以我一直在尝试使用jQuery序列化表单并以其他方式发送它们
Brian

@Brian:难道您不能将所有内容合而为一form,那么所有内容都会自动发送到一起吗?
Marcel Korpel

一种形式在jQueryUI对话框中-所以我不能只包括它们全部。
Brian

12
提取其所有值,使用所有三种表单中的所有字段动态构建表单,然后提交该表单。该形式可以是不可见的。不要使用JQuery AJAX方法,请使用$("#myForm").submit()。该表单将是不可见的,仅用于从客户端代码提交值,而不用于用户输入,将永远不会显示或以其他方式使用,并且页面将被刷新。
Matt Luongo

79

将表单添加到您的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,具体方法取决于您使用的服务器端语言。


当我这样做时,我将浏览器重定向到域/未定义。我究竟做错了什么?
vigamage


9

正如在其他答案中所说的那样,无法使用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


8

简短的回答:不。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();

4

就这么简单

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

我必须解决此问题,才能对应用程序进行屏幕锁定,在该应用程序中,我必须以用户身份传递敏感数据,并在他工作时传递url。然后创建一个执行此代码的函数


1
或在done()函数集中window.location.href
克里斯·爱德华兹

是@ChrisEdwards,在我的示例中,我尝试使用jquery post的返回数据。我希望这对某人有用。
塞尔吉奥·罗丹

3

您是否考虑过仅使用本地/会话存储?-或-取决于要构建的内容的复杂性;您甚至可以使用indexDB。

注意

Local storage并且indexDB不安全-因此您要避免在其中任何一个中存储任何敏感/个人数据(即姓名,地址,电子邮件地址,DOB等)。

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

IndexDB[有点多(但不多得多)]复杂,并且30MB noSQL database内置在每个浏览器中(但如果用户选择使用,则基本上是无限的)->下次使用Google文档时,请打开DevTools->应用程序-> IndexDB并达到顶峰。[扰流板警报:已加密]。

关注LocalSession 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...知道,只是为了踢球。


-4

您可以使用GET而不是pass,但是不要对重要的值使用此方法,

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

在CustomerBasket.php中

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

3
它的GET方法,但问题是POST方法好友
Thamaraiselvam 2015年

@thamaraiselvam基萨·米娅(Kisa Mia)的答案可能不太好,但是这里的GET路线是正确的。这个问题与使用POST方法无关,用户只是问是否有办法获取POST数据并通过window.location.href发送。您首先应该知道Window.location.href GET请求。这个答案没有错-只是简单地很难将其扩展到编码为QueryString的大量表单字段。但是,最明显的通过URL发送数据的方式(可以通过window.location.href进行更改)是通过查询字符串参数。
SylonZero'2

@SylonZero您不能将POST数据附加到GET请求。它们是不同类型的请求,并且数据在POST中看起来不同。HTTP规范的重要部分相当简短。
科林vH

@ColinvH您需要仔细阅读我写的内容。TLDR版本:您可以获取用于生成POST的数据,并将其编码为查询字符串参数。
SylonZero'7
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.