it-swarm.it

Come posso aggiornare una pagina con jQuery?

Come posso aggiornare una pagina con jQuery?

2185
luca

Usa location.reload() :

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

La funzione reload() accetta un parametro facoltativo che può essere impostato su true per forzare un ricaricamento dal server piuttosto che dalla cache. Il parametro è impostato su false, quindi per impostazione predefinita la pagina potrebbe ricaricarsi dalla cache del browser.

3519
Roy

Questo dovrebbe funzionare su tutti i browser anche senza jQuery:

location.reload();
429
Thorben

Ci sono multiplo modi illimitati per aggiornare una pagina con 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 avessimo bisogno di estrarre il documento da di nuovo il server web (come nel caso in cui il contenuto del documento cambia dinamicamente) passeremmo l'argomento come true.

Puoi continuare a pubblicare l'elenco in modo creativo:

  • window.location = window.location
  • window.self.window.self.window.window.location = window.location
  • ... e altri 534 modi

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>

390
Ionică Bizău

Un sacco di modi funzionerà, suppongo:

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

Per ricaricare una pagina con jQuery, fai:

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

L'approccio qui che ho usato era Ajax jQuery. Ho provato su Chrome 13. Quindi ho messo il codice nel gestore che attiverà la ricarica. Il URL è "", che significa questa pagina.

117
Peter

Se la pagina corrente è stata caricata da una richiesta POST, potresti volerla usare

window.location = window.location.pathname;

invece di

window.location.reload();

poiché window.location.reload() chiederà conferma se viene richiamato su una pagina che è stata caricata da una richiesta POST.

100
SumairIrshad

La domanda dovrebbe essere,

Come aggiornare una pagina con JavaScript

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

Hai solo l'imbarazzo della scelta.

59
JohnP

Potresti volerlo usare

location.reload(forceGet)

forceGet è un booleano e facoltativo.

L'impostazione predefinita è false che ricarica la pagina dalla cache.

Impostare questo parametro su true se si desidera forzare il browser a ottenere la pagina dal server per eliminare anche la cache.

O semplicemente

location.reload()

se vuoi veloce e facile con il caching.

51
Pinch

Tre approcci con diversi comportamenti correlati alla cache:

  • location.reload(true)

    Nei browser che implementano il parametro forcedReload di location.reload(), si ricarica recuperando una nuova copia della pagina e tutte le sue risorse (script, fogli di stile, immagini, ecc.). Non servirà any risorse dalla cache - ottiene nuove copie dal server senza inviare intestazioni if-modified-since o if-none-match nella richiesta.

    Equivalente all'utente che esegue un "hard reload" nei browser dove è possibile.

    Nota che passare true a location.reload() è supportato in Firefox (vedi MDN ) e Internet Explorer (vedi MSDN ) ma non è supportato universalmente e non fa parte di la specifica W3 HTML 5 , né la W3 draft HTML 5.1 spec , né WHATWG HTML Living Standard .

    Nei browser non supportati, come Google Chrome, location.reload(true) si comporta come location.reload().

  • location.reload() o location.reload(false)

    Ricarica la pagina, recuperando una copia nuova e non memorizzata nella cache dell'HTML stesso e eseguendo RFC 7234 richieste di riconvalida per qualsiasi risorsa (come script) che il browser ha memorizzato nella cache, anche se sono fresh sono RFC 7234 consente al browser di servirli senza riconvalida.

    Esattamente come il browser dovrebbe utilizzare la sua cache quando si esegue una chiamata location.reload() non è specificato o documentato per quanto posso dire; Ho determinato il comportamento sopra per sperimentazione.

    Questo è equivalente all'utente che preme semplicemente il pulsante "Aggiorna" nel proprio browser.

  • location = location (o infinitamente molte altre tecniche possibili che prevedono l'assegnazione a location o alle sue proprietà)

    Funziona solo se l'URL della pagina non contiene un frammento/hashbang!

    Ricarica la pagina senza recuperare o riconvalidare anyfresh resources dalla cache. Se l'HTML della pagina stessa è fresco, questo ricaricherà la pagina senza eseguire alcuna richiesta HTTP.

    Questo è equivalente (dal punto di vista della cache) all'utente che apre la pagina in una nuova scheda.

    Tuttavia, se l'URL della pagina contiene un hash, questo non avrà alcun effetto.

    Di nuovo, il comportamento del caching qui non è specificato per quanto ne so; L'ho determinato testando.

Quindi, in sintesi, vuoi usare:

  • location = location per l'uso massimo della cache, fino a quando la pagina non ha un hash nel suo URL, nel qual caso ciò non funzionerà
  • location.reload(true) per scaricare nuove copie di tutte le risorse senza riconvalida (sebbene non sia universalmente supportato e non si comporterà diversamente da location.reload() in alcuni browser, come Chrome)
  • location.reload() per riprodurre fedelmente l'effetto dell'utente cliccando sul pulsante 'Aggiorna'.
32
Mark Amery

window.location.reload() si ricaricherà dal server e caricherà nuovamente tutti i dati, script, immagini, ecc.

Quindi, se vuoi semplicemente aggiornare l'HTML, il window.location = document.URL tornerà molto più veloce e con meno traffico. Ma non ricaricherà la pagina se c'è un hash (#) nell'URL.

23
user762330

La funzione jQuery Load può anche eseguire un aggiornamento della pagina:

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

Ecco una soluzione che ricarica in modo asincrono una pagina usando jQuery. Evita lo sfarfallio causato da window.location = window.location. Questo esempio mostra una pagina che si ricarica continuamente, come in una dashboard. È testato in battaglia e funziona su una TV con display informativo a 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>

Gli appunti:

  • L'utilizzo di $.ajax direttamente come $.get('',function(data){$(document.body).html(data)})fa sì che i file css/js ottengano cache -busted , anche se usi cache: true, ecco perché usiamo parseHTML
  • parseHTML NON TROVA UN TAG body quindi tutto il tuo corpo ha bisogno di andare in un div extra, spero che questa pepita di conoscenza ti aiuti un giorno, puoi indovinare come abbiamo scelto l'id per quel div
  • Utilizza http-equiv="refresh" nel caso in cui qualcosa vada storto con javascript/hiccup del server, quindi la pagina verrà ANCORA ricaricata senza che tu riceva una telefonata
  • Questo approccio probabilmente perde la memoria in qualche modo, l'http-equiv refresh risolve quello
13
William Entriken

Poiché la domanda è generica, proviamo a riassumere possibili soluzioni per la risposta:

Semplice soluzione JavaScript semplice:

Il modo più semplice è una soluzione a una riga inserita in modo appropriato:

location.reload();

Quante persone mancano qui, perché sperano di ottenere alcuni "punti" è che la funzione reload () stessa offre un parametro booleano come parametro (dettagli: https://developer.mozilla.org/en-US/docs/Web/API/Posizione/ricarica ).

Il metodo Location.reload () ricarica la risorsa dalla corrente URL. Il suo parametro univoco opzionale è un booleano, che, quando è true, fa sì che la pagina venga sempre ricaricata dal server. Se è falso o non specificato, il browser può ricaricare la pagina dal suo cache.

Questo significa che ci sono due modi:

Soluzione 1: Forza il ricaricamento della pagina corrente dal server

location.reload(true);

Soluzione2: Ricarica dalla cache o dal server (in base al browser e alla configurazione)

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

E se vuoi combinarlo con jQuery ascoltando un evento, ti consiglio di utilizzare il metodo ".on ()" invece di ".click" o altri wrapper di eventi, ad es. una soluzione più corretta sarebbe:

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

Ho trovato

window.location.href = "";

o

window.location.href = null;

rende anche una pagina di aggiornamento.

Questo rende molto più facile ricaricare la pagina rimuovendo qualsiasi hash . Questo è molto bello quando sto usando AngularJS nel simulatore iOS, così da non dover eseguire nuovamente l'app.

11
Mujah Maskey

Puoi usare JavaScript location.reload() method . Questo metodo accetta un parametro booleano. true o false. Se il parametro è true; la pagina viene sempre ricaricata dal server. Se è false; che è il default o con il browser dei parametri vuoto ricarica la pagina dalla sua cache.

Con il parametro true

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

Con il parametro default/false

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

Utilizzando jquery

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

Tu non ne hai bisogno nulla da jQuery, per ricaricare una pagina usando puro JavaScript, usa semplicemente la funzione di ricarica sulla proprietà posizione come questa:

window.location.reload();

Per impostazione predefinita, questo ricaricherà la pagina utilizzando la cache del browser (se esiste) ...

Se ti piacerebbe fare forza ricaricare la pagina, basta passare un valore true per ricaricare il metodo come sotto ...

window.location.reload(true);

Inoltre, se sei già in scope della finestra, puoi sbarazzarti di window e fare:

location.reload();
5
Alireza

Tutte le risposte qui sono buone. Dato che la domanda specifica di ricaricare la pagina con jquery, ho solo pensato di aggiungere qualcosa in più per i futuri lettori.

jQuery è una libreria JavaScript multipiattaforma progettata per semplificare lo scripting lato client di HTML.

~ Wikipedia ~

Quindi capirai che il fondamento di jquery , o jquery è basato su javascript . Quindi andare con pure javascript è molto meglio quando si tratta di cose semplici.

Ma se hai bisogno di una soluzione jquery , eccone una.

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

Se stai usando jQuery e vuoi aggiornare, prova ad aggiungere jQuery in una funzione javascript:

Volevo nascondere un iframe da una pagina quando facevo clic su oh h3, per me funzionava, ma non ero in grado di fare clic sull'elemento che mi permetteva di visualizzare la iframe per cominciare a meno che non avessi aggiornato manualmente il browser ... non ideale .

Ho provato il seguente:

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

Miscelare Jane javascript con jQuery dovrebbe funzionare.

// 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);
2
J. Moreno

Soluzione Javascript semplice:

 location = location; 

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

1
hev1

Utilizza onclick="return location.reload();" all'interno del tag button.

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

uso 

location.reload();

o

window.location.reload();
1
H.Ostwal

Ecco alcune linee di codice che puoi utilizzare per ricaricare la pagina usando jQuery .

Usa il wrapper jQuery ed estrae l'elemento dom nativo. 

Usalo se vuoi solo un jQuery feeling sul tuo codice e non ti interessa di speed/performance del codice.

Scegli tra 1 e 10 che si adattino alle tue esigenze o aggiungine altro in base al modello e alle risposte precedenti.

<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>
0
David Angulo

È il più breve in JavaScript.

location = '';
0
Na Nonthasen

Questo funziona per me:

document.location.reload();
0
GameMaster