Alterar URL e redirecionar usando jQuery

132

Eu tenho um código como este,

<form id="abc">
  <input type="text" id="txt" />
</form>

e agora eu quero redirecionar assim,

var temp = $("#txt").val();
url = "http://example.com/" + temp;
window.location.replace(url);
// or window.location(url);

Existe alguma maneira no jQuery para resolver isso? Ainda me permite ter url = http://example.com.

— gacon
fonte

Muito obrigado a todos! Agora ainda não sei qual a diferença entre window.location e window.location.replace. No meu exemplo, eu só preciso postar um URL na minha página assim: abc.com/abc para que o abc pesquise no meu banco de dados com abc é o que o usuário digita put e pressiona o botão enter ou, mas eles sempre retornam abc.com ? name = abc, então acho que posso acionar no evento submit para redirecionar e alterar meu URL para o que quero, mas eles ainda não fazem nada. Isso é tudo, a propósito, obrigado novamente!

— Gacon

3

Expliquei a diferença entre window.location e window.location.replace aqui: stackoverflow.com/questions/846954/…

— Mathias Bynens

343

Como mencionado nas outras respostas, você não precisa do jQuery para fazer isso; você pode apenas usar as propriedades padrão.

No entanto, parece que você não parece saber a diferença entre window.location.replace(url)e window.location = url.

window.location.replace(url)substitui o local atual na barra de endereço por um novo. A página que estava chamando a função não será incluída no histórico do navegador. Portanto, no novo local, clicar no botão voltar em seu navegador faria com que você voltasse à página que estava visualizando antes de visitar o documento que contém o JavaScript de redirecionamento.
window.location = urlredireciona para o novo local. Nesta nova página, o botão voltar do seu navegador apontaria para a página original que contém o JavaScript redirecionado.

Obviamente, ambos têm seus casos de uso, mas parece-me que, neste caso, você deve ficar com o último.

PS: Você provavelmente esqueceu duas barras depois http:da linha 2 do seu JavaScript:

url = "http://abc.com/" + temp;

— Mathias Bynens
fonte

5

Mas, para ser muito correto, você deve definir window.location.href em vez de window.location. Embora tanto o trabalho nos dias de hoje o último é um objeto (e, claro, sem suporte para atribuir uma string para em uma versão antiga do IE ...)

— Victor

1

@ Victor [citação necessário]

— Mathias Bynens

1

@Victor Isso não lista qualquer versão antiga do IE onde este quebras no comentário do @ bobince está correto:. Stackoverflow.com/a/10016109/96656#comment18225061_10016109

— Mathias Bynens

Menos 1. Não é suficiente jQuery

— VarunAgw 04/04

41

para dizer a verdade, eu ainda não entendi o que você precisa, mas

window.location(url);

deveria estar

window.location = url;

uma pesquisa na referência window.location lhe dirá isso.

— balexandre
fonte

18

O jQuery não tem uma opção para isso, nem deveria ter uma. Este é um javascript perfeitamente válido e não há razão para o jQuery fornecer funções de wrapper para isso.

O jQuery é apenas uma biblioteca sobre o javascript, mesmo se você usar o jQuery, ainda poderá usar o javascript normal.

Btw window.location não é uma função, mas uma propriedade que você deve definir assim:

window.location = url;

— Pim Jager
fonte

voto negativo para reivindicar o jQuery não possui um método para isso (mesmo que seja um exagero desnecessário e não deva ser recomendado) $ jq (window) .attr ("location", " yourdomain.com" ); ou $ (location) .attr ('href', url);

— Rob

9

Voto positivo para desfazer esse voto negativo. A resposta de Pim pode ser lida facilmente como "não há método específico no jQuery para isso". Diminuir o voto na semântica lexical é um uso indevido desse privilégio.

— Nigel Anjo

Promovido o voto porque você sabe ... é certo "não há método específico no jQuery para isso.", Por que você gostaria de ter uma solução feia como: $ jq (window) .attr ("location", "yourdomain". com "); quando você pode ter algo como window.location = url;

— Rodolfo Abarca

11

var temp="/yourapp/";
$(location).attr('href','http://abcd.com'+temp);

Experimente isso ... usado como alternativa

3

Tente isso ...

$("#abc").attr("action", "/yourapp/" + temp).submit();

O que significa:

Encontre um formulário com id"abc", altere o attributenome "ação" e envie-o ...

Isso funciona para mim ... !!!

— amouat
fonte

1

lol, isso é um S engraçado! Eu gosto da ideia no fim das contas. Pontos por ser criativo!

— precisa saber é o seguinte

-2

você pode fazer isso de maneira mais simples sem o jquery

location = "https://example.com/" + txt.value

Mostrar snippet de código

function send() {
  location = "https://example.com/" + txt.value;
}

<form id="abc">
  <input type="text" id="txt" />
</form>

<button onclick="send()">Send</button>

Expandir snippet

— Kamil Kiełczewski
fonte

Não funciona, e não consigo ver como poderia. A localização não é global. window.location é. editar: Sim verificado. Não funciona, pelo menos não no chrome. Considere atualizar seu exemplo para window.location

— Shayne

Estranho - no meu chrome, firefox, safari funciona - a localização é propriedade global - por exemplo, quando digito no console do chrome: location = 'https://google.com'depois ele muda de página - você experimenta outros navegadores?

— Kamil Kiełczewski 16/07/19

@ Shayne quando você digita thise this.locationno console - o que você vê?

— Kamil Kiełczewski 16/07/19

this.location só funciona quando "this" está se referindo à janela. O que raramente vai ser o caso. Explícita é sempre melhor do que implícito, especialmente se você não quer ser surpreendido quando seu código não é portátil ou reutilizável

— Shayne

Sim, você está certo - no entanto, eu me pergunto: por que no seu navegador thisnão se refere ao windowobjeto (e o snippet acima não funciona)? (em navegadores contexto global que deve ser definido para janelas objeto )

— Kamil Kiełczewski