Como posso atualizar uma página com jQuery?

Como posso atualizar uma página com jQuery?

Use location.reload():

$('#something').click(function() {
    location.reload();
});

A reload()função usa um parâmetro opcional que pode ser definido truepara forçar uma recarga do servidor em vez do cache. O parâmetro é padronizado como false, portanto, por padrão, a página pode ser recarregada do cache do navegador.

Isso deve funcionar em todos os navegadores, mesmo sem o jQuery:

location.reload();

Existem várias maneiras ilimitadas de atualizar uma página com JavaScript:

1. location.reload()
2. history.go(0)
3. location.href = location.href
4. location.href = location.pathname
5. location.replace(location.pathname)

6. location.reload(false)

   Se precisássemos extrair o documento do servidor da Web novamente (como onde o conteúdo do documento muda dinamicamente), passaríamos o argumento como true.

Você pode continuar a lista sendo criativa:

• window.location = window.location
• window.self.window.self.window.window.location = window.location
• ... e outras 534 maneiras

var methods = [
  "location.reload()",
  "history.go(0)",
  "location.href = location.href",
  "location.href = location.pathname",
  "location.replace(location.pathname)",
  "location.reload(false)"
];

var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
  (function(cMethod) {
    $body.append($("<button>", {
      text: cMethod
    }).on("click", function() {
      eval(cMethod); // don't blame me for using eval
    }));
  })(methods[i]);
}

button {
  background: #2ecc71;
  border: 0;
  color: white;
  font-weight: bold;
  font-family: "Monaco", monospace;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 2px;
}
button:hover {
  background: #27ae60;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

De várias maneiras, suponho:

• window.location.reload();
• history.go(0);
• window.location.href=window.location.href;

Para recarregar uma página com jQuery, faça:

$.ajax({
    url: "",
    context: document.body,
    success: function(s,x){
        $(this).html(s);
    }
});

A abordagem aqui que eu usei foi o Ajax jQuery. Eu testei no Chrome 13. Em seguida, coloquei o código no manipulador que acionará a recarga. O URL é "", o que significa esta página .

Se a página atual foi carregada por uma solicitação POST, convém usar

window.location = window.location.pathname;

ao invés de

window.location.reload();

porque window.location.reload()solicitará confirmação se chamado em uma página que foi carregada por uma solicitação POST.

A questão deve ser,

Como atualizar uma página com JavaScript

window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another

Você é mimado pela escolha.

Você pode querer usar

location.reload(forceGet)

forceGet é um booleano e opcional.

O padrão é false, que recarrega a página do cache.

Defina esse parâmetro como true se desejar forçar o navegador a obter a página do servidor e a se livrar do cache também.

Ou apenas

location.reload()

se você quiser rápido e fácil com o cache.

Três abordagens com diferentes comportamentos relacionados ao cache:

• location.reload(true)

  Nos navegadores que implementam o forcedReloadparâmetro de location.reload(), recarrega buscando uma nova cópia da página e de todos os seus recursos (scripts, folhas de estilo, imagens etc.). Não servirá nenhum recurso do cache - obtém novas cópias do servidor sem enviar nenhum if-modified-sinceouif-none-match cabeçalho cabeçalho na solicitação.

  Equivalente ao usuário fazer uma "recarga forçada" nos navegadores, sempre que possível.

  Observe que a passagem truepara location.reload()é suportada no Firefox (consulte MDN ) e Internet Explorer (consulte MSDN ), mas não é universalmente suportada e não faz parte da especificação W3 HTML 5 , nem da especificação preliminar do W3 HTML 5.1 , nem do WHATWG HTML Living Standard .

  Em navegadores não compatíveis, como o Google Chrome, location.reload(true)se comporta da mesma forma que location.reload().

• location.reload() ou location.reload(false)

  Recarrega a página, buscando uma cópia nova e sem cache do próprio HTML da página e executando solicitações de revalidação da RFC 7234 para quaisquer recursos (como scripts) que o navegador armazenou em cache, mesmo que sejam recentes, caso a RFC 7234 permita que o navegador seja veiculado sem revalidação.

  Exatamente como o navegador deve utilizar seu cache ao realizar uma location.reload()chamada não está especificado ou documentado, tanto quanto eu sei; Eu determinei o comportamento acima por experimentação.

  Isso é equivalente ao usuário simplesmente pressionar o botão "atualizar" no navegador.

• location = location (ou infinitamente muitas outras técnicas possíveis que envolvem a atribuição de location ou a suas propriedades)

  Funciona apenas se o URL da página não contiver um fragmento / hashbang!

  Recarrega a página sem buscar ou revalidar quaisquer novos recursos do cache. Se o próprio HTML da página for novo, isso recarregará a página sem executar nenhuma solicitação HTTP.

  Isso é equivalente (de uma perspectiva de armazenamento em cache) ao usuário que abre a página em uma nova guia.

  No entanto, se o URL da página contiver um hash, isso não terá efeito.

  Novamente, o comportamento do cache aqui não é especificado, tanto quanto eu sei; Eu determinei isso testando.

Então, em resumo, você deseja usar:

• location = locationpara uso máximo do cache, desde que a página não tenha um hash em seu URL; nesse caso, isso não funcionará
• location.reload(true)buscar novas cópias de todos os recursos sem revalidar (embora não seja universalmente suportado e não se comporte de maneira diferente location.reload()em alguns navegadores, como o Chrome)
• location.reload() reproduzir fielmente o efeito do usuário clicando no botão 'atualizar'.

window.location.reload() será recarregado do servidor e carregará todos os seus dados, scripts, imagens etc. novamente.

Portanto, se você quiser apenas atualizar o HTML, o window.location = document.URLretorno será muito mais rápido e com menos tráfego. Mas não recarregará a página se houver um hash (#) no URL.

A Loadfunção jQuery também pode executar uma atualização da página:

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});

Como a pergunta é genérica, vamos tentar resumir possíveis soluções para a resposta:

Solução JavaScript simples e simples :

A maneira mais fácil é uma solução de uma linha, colocada de maneira apropriada:

location.reload();

O que muitas pessoas estão faltando aqui, porque esperam obter alguns "pontos", é que a própria função reload () oferece um booleano como parâmetro (detalhes: https://developer.mozilla.org/en-US/docs/Web / API / Location / recarregar ).

O método Location.reload () recarrega o recurso da URL atual. Seu parâmetro exclusivo opcional é um booleano que, quando verdadeiro, faz com que a página seja sempre recarregada do servidor. Se for falso ou não especificado, o navegador pode recarregar a página do cache.

Isso significa que existem duas maneiras:

Solução 1: forçar o recarregamento da página atual do servidor

location.reload(true);

Solution2: Recarregando do cache ou servidor (com base no navegador e na sua configuração)

location.reload(false);
location.reload();

E se você quiser combiná-lo com o jQuery e ouvir um evento, eu recomendaria usar o método ".on ()" em vez de ".click" ou outros wrappers de eventos, por exemplo, uma solução mais adequada seria:

$('#reloadIt').on('eventXyZ', function() {
    location.reload(true);
});

Aqui está uma solução que recarrega assincronamente uma página usando jQuery. Evita a cintilação causada por window.location = window.location. Este exemplo mostra uma página que é recarregada continuamente, como em um painel. É testado em batalha e está sendo executado em uma TV de exibição de informações na Times Square.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta http-equiv="refresh" content="300">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script>
    function refresh() {
      $.ajax({
        url: "",
        dataType: "text",
        success: function(html) {
          $('#fu').replaceWith($.parseHTML(html));
          setTimeout(refresh,2000);
        }
      });
    }
    refresh();
    </script>
  </head>
  <body>
    <div id="fu">
      ...
    </div>
  </body>
</html>

Notas:

• Usar $.ajaxdiretamente como $.get('',function(data){$(document.body).html(data)}) faz com que os arquivos css / js sejam bloqueados pelo cache , mesmo se você usar cache: true, é por isso que usamosparseHTML
• parseHTMLNÃO encontrará uma bodytag para que todo o seu corpo precise participar de uma div extra. Espero que essa pepita de conhecimento o ajude um dia, você pode adivinhar como escolhemos o ID para essediv
• Use http-equiv="refresh"apenas no caso de algo dar errado com o soluço javascript / servidor, a página AINDA será recarregada sem que você receba uma ligação.
• Essa abordagem provavelmente vaza memória de alguma forma, a http-equivatualização corrige

eu encontrei

window.location.href = "";

ou

window.location.href = null;

também atualiza a página.

Isso facilita muito o recarregamento da página, removendo qualquer hash. Isso é muito bom quando estou usando o AngularJS no simulador do iOS, para não precisar executar o aplicativo novamente.

Você pode usar o método JavaScript location.reload() . Este método aceita um parâmetro booleano. trueou false. Se o parâmetro for true; a página sempre recarregada do servidor. Se for false; qual é o padrão ou, com o navegador de parâmetros vazio, recarregue a página do cache.

Com trueparâmetro

<button type="button" onclick="location.reload(true);">Reload page</button>

Com default/ falseparâmetro

 <button type="button" onclick="location.reload();">Reload page</button>

Usando jquery

<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
    $('#Reloadpage').click(function() {
        location.reload();
    }); 
</script>

Você não precisa de nada do jQuery, para recarregar uma página usando JavaScript puro , basta usar a função reload na propriedade location como esta:

window.location.reload();

Por padrão, isso recarregará a página usando o cache do navegador (se existir) ...

Se você deseja forçar o recarregamento da página, basta passar um valor verdadeiro para recarregar o método como abaixo ...

window.location.reload(true);

Além disso, se você já está no escopo da janela , pode se livrar da janela e fazer:

location.reload();

usar

location.reload();

ou

window.location.reload();

Use onclick="return location.reload();"dentro da etiqueta do botão.

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>

Se você estiver usando jQuery e quiser atualizar, tente adicionar seu jQuery em uma função javascript:

Eu queria ocultar um iframe de uma página ao clicar em ah h3, para mim funcionou, mas não consegui clicar no item que me permitia visualizar oiframe início, a menos que eu atualizasse o navegador manualmente ... não é o ideal.

Eu tentei o seguinte:

var hide = () => {
    $("#frame").hide();//jQuery
    location.reload(true);//javascript
};

A mistura de javascript simples com o jQuery deve funcionar.

// code where hide (where location.reload was used)function was integrated, below    
    iFrameInsert = () => {
        var file = `Fe1FVoW0Nt4`;
        $("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/${file}\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);
        $("h3").enter code hereclick(hide);
}

// View Player 
$("#id-to-be-clicked").click(iFrameInsert);

Todas as respostas aqui são boas. Como a pergunta especifica sobre recarregar a página comjquery, Pensei em adicionar algo mais para futuros leitores.

O jQuery é uma biblioteca JavaScript multiplataformaprojetada para simplificar o script de HTML do lado do cliente.

^{~ Wikipedia ~}

Então você entenderá que o fundamento de jqueryou jquery é baseado em javascript. Então, indo com purajavascript é muito melhor quando se trata de coisas simples.

Mas se você precisar de um jquery solução, aqui está uma.

$(location).attr('href', '');

Existem várias maneiras de recarregar as páginas atuais, mas, de alguma forma, usando essas abordagens, você pode ver a página atualizada, mas com poucos valores de cache, por isso supere esse problema ou, se desejar fazer solicitações difíceis, use o código abaixo.

    location.reload(true);
    //Here, it will make a hard request or reload the current page and clear the cache as well.


    location.reload(false); OR location.reload();
    //It can be reload the page with cache

<i id="refresh" class="fa fa-refresh" aria-hidden="true"></i>

<script>
$(document).on('click','#refresh',function(){
   location.reload(true);
});
</script>

Solução Javascript Simples:

 location = location; 

<button onClick="location = location;">Reload</button>

Provavelmente o mais curto (12 caracteres) - histórico de uso

history.go()

Você pode escrever de duas maneiras. 1º é a maneira padrão de recarregar a página, também chamada de atualização simples

location.reload(); //simple refresh

E outro é chamado de atualização completa . Aqui você passa a expressão booleana e a define como verdadeira. Isso recarregará a página destruindo o cache antigo e exibindo o conteúdo do zero.

location.reload(true);//hard refresh

É o mais curto em JavaScript.

window.location = '';

$(document).on("click", "#refresh_btn", function(event) 
{
     window.location.replace(window.location.href);
});

Aqui estão algumas linhas de código que você pode usar para recarregar a página usando o jQuery .

Ele usa o wrapper jQuery e extrai o elemento dom nativo.

Use isso se você quiser apenas uma sensação de jQuery no seu código e não se importar com velocidade / desempenho do código.

Basta escolher de 1 a 10 que atenda às suas necessidades ou adicionar um pouco mais com base no padrão e nas respostas anteriores.

<script>
  $(location)[0].reload(); //1
  $(location).get(0).reload(); //2
  $(window)[0].location.reload(); //3
  $(window).get(0).location.reload(); //4
  $(window)[0].$(location)[0].reload(); //5
  $(window).get(0).$(location)[0].reload(); //6
  $(window)[0].$(location).get(0).reload(); //7
  $(window).get(0).$(location).get(0).reload(); //8
  $(location)[0].href = ''; //9
  $(location).get(0).href = ''; //10
  //... and many other more just follow the pattern.
</script>