passar dados de postagem com window.location.href

113

Ao usar window.location.href, gostaria de passar os dados POST para a nova página que estou abrindo. isso é possível usando JavaScript e jQuery?

Brian
fonte
11
A configuração window.location.hreffaz uma solicitação GET para a nova URL, não POST.
Chetan S,

Respostas:

85

Usando window.location.hrefnão é possível enviar uma solicitação POST.

O que você precisa fazer é configurar uma formtag com campos de dados nela, definir o actionatributo do formulário para a URL e o methodatributo para POST, em seguida, chamar o submitmétodo na formtag.

Guffa
fonte
Tenho dados provenientes de 3 formulários diferentes e estou tentando enviar todos os 3 formulários para a mesma página, então estou tentando serializar os formulários com jQuery e enviá-los de outra forma
Brian,
@Brian: Você não pode simplesmente colocar tudo em um form, para que tudo seja enviado junto automaticamente?
Marcel Korpel
Um formulário está em uma caixa de diálogo jQueryUI - portanto, não posso simplesmente incluir todos eles.
Brian,
12
Extraia todos os seus valores, crie dinamicamente um formulário com todos os campos em todos os três formulários e envie esse formulário. O formulário pode ser invisível. Não use um método JQuery AJAX, use $("#myForm").submit(). O formulário - que será invisível e usado apenas para enviar valores de seu código do lado do cliente, não a entrada do usuário - nunca será mostrado nem usado de outra forma, e a página será atualizada.
Matt Luongo,
79

Adicione um formulário ao seu HTML, mais ou menos assim:

<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>

e usar JQuery para preencher esses valores (é claro que você também pode usar javascript para fazer algo semelhante)

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

Então, finalmente, envie o formulário

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

no lado do servidor, você deve ser capaz de obter os dados enviados verificando var1e var2, como fazer isso depende de qual linguagem do lado do servidor você está usando.

Mohamed Khamis
fonte
quando faço isso, meu navegador redireciona para domínio / indefinido. O que estou fazendo de errado?
vigamage
9

Use este arquivo: "jquery.redirect.js"

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

consulte https://github.com/mgalante/jquery.redirect

Mohd Tauovir Khan
fonte
9

Como já foi dito em outras respostas, não há como fazer um pedido POST usando window.location.href, para isso você pode criar um formulário e enviá-lo imediatamente.

Você pode usar esta função:

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

Moto de água
fonte
8

Resposta curta: não. window.location.hrefnão é capaz de transmitir dados POST.

Resposta um pouco mais satisfatória: você pode usar esta função para clonar todos os dados do formulário e enviá-los.

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);
            }
        }
    }
}
  • Faça submitMe.importFields(form_element);para cada um dos três formulários que deseja enviar.
  • Essa função adicionará o nome de cada formulário aos nomes de suas entradas filho (se você tiver um <input name="email">in <form name="login">, o nome enviado será login_name.
  • Você pode alterar a nameJoinervariável para algo diferente de _modo que não entre em conflito com seu esquema de nomenclatura de entrada.
  • Depois de importar todos os formulários necessários, faça submitMe.submit();
joequincy
fonte
4

é tão simples quanto isso

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

Tive que resolver isso para fazer um bloqueio de tela do meu aplicativo onde tinha que passar dados sigilosos como usuário e a url onde ele estava trabalhando. Em seguida, crie uma função que execute este código

Sergio Roldan
fonte
1
Ou no done()conjunto de funçõeswindow.location.href
Chris Edwards
Sim @ChrisEdwards, no meu exemplo eu tento usar os dados de retorno do post jquery. Espero que seja útil para alguém.
Sergio Roldan
3

Você considerou simplesmente usar armazenamento local / por sessão? -ou- Dependendo da complexidade do que você está construindo; você pode até usar indexDB.

nota :

Local storagee indexDBnão são seguros - portanto, você deseja evitar o armazenamento de quaisquer dados confidenciais / pessoais (ou seja, nomes, endereços, endereços de e-mail, DOB, etc.) em qualquer um deles.

Session Storage é uma opção mais segura para qualquer coisa sensível, só é acessível para a origem que define os itens e também apaga assim que o navegador / guia é fechado.

IndexDBé um pouco mais [mas não muito mais] complicado e está 30MB noSQL databaseintegrado em todos os navegadores (mas pode ser basicamente ilimitado se o usuário aceitar) -> da próxima vez que usar o Google Docs, abra DevTools -> aplicativo -> IndexDB e dê uma olhada. [alerta de spoiler: está criptografado].

Focando em Locale Session Storage; ambos são muito simples de usar:

// 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( ); 

Se simples não é o seu lugar - ou - talvez você queira sair da estrada e tentar uma abordagem diferente todos juntos -> você provavelmente pode usar um shared web worker... sabe, apenas por diversão.

Down_with_opp
fonte
-4

Você pode usar GET em vez de passar, mas não use este método para valores importantes,

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

No CustomerBasket.php

<?php
  $value = $_GET["oridd"];
  echo  $value;
?>
Kissa Mia
fonte
3
é o método GET, mas a questão é o método POST amigo
Thamaraiselvam
@thamaraiselvam Kissa Mia pode não ter formulado bem a resposta, mas está certa sobre a rota GET aqui. A questão não está ligada ao método POST - o usuário apenas perguntou se havia uma maneira de pegar os dados POST e enviá-los via window.location.href. E você deve primeiro saber que Window.location.href É uma solicitação GET. Essa resposta não está errada - simplesmente não será fácil dimensionar para um grande número de campos de formulário, codificados como QueryString. No entanto, a maneira mais óbvia de enviar dados por meio de uma URL (que é o que você pode alterar com window.location.href) é por meio de parâmetros de string de consulta.
SylonZero
@SylonZero Você não pode anexar dados POST a uma solicitação GET. Eles são tipos diferentes de solicitações e os dados parecem diferentes em um POST. As partes importantes da especificação HTTP são bastante curtas.
Colin vH
@ColinvH Você precisa ler o que escrevi com mais atenção. Versão TLDR: você pode pegar os dados que seriam usados ​​para gerar um POST e codificá-los como parâmetros de string de consulta.
SylonZero