Come posso aggiornare una pagina con jQuery?

Come posso aggiornare una pagina con jQuery?

Utilizzare location.reload():

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

La reload()funzione accetta un parametro facoltativo che può essere impostato trueper forzare un ricaricamento dal server anziché dalla cache. Per impostazione predefinita false, il parametro è , quindi per impostazione predefinita la pagina potrebbe essere ricaricata dalla cache del browser.

Questo dovrebbe funzionare su tutti i browser anche senza jQuery:

location.reload();

Esistono diversi 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 di nuovo il documento dal web-server (come dove i contenuti del documento cambiano in modo dinamico) passeremmo l'argomento true.

Puoi continuare a essere 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>

Molti modi funzioneranno, suppongo:

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

Per ricaricare una pagina con jQuery, procedere come segue:

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

L'approccio che ho usato qui è stato Ajax jQuery. L'ho provato su Chrome 13. Quindi ho inserito il codice nel gestore che attiverà il ricaricamento. L' URL è "", che significa questa pagina .

Se la pagina corrente è stata caricata da una richiesta POST, è possibile che si desideri utilizzare

window.location = window.location.pathname;

invece di

window.location.reload();

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

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 l'imbarazzo della scelta.

Potresti voler usare

location.reload(forceGet)

forceGet è un valore 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 sbarazzarsi anche della cache.

O semplicemente

location.reload()

se vuoi una rapida e semplice memorizzazione nella cache.

Tre approcci con diversi comportamenti relativi alla cache:

• location.reload(true)

  Nei browser che implementano il forcedReloadparametro di location.reload(), ricarica ricaricando una nuova copia della pagina e di tutte le sue risorse (script, fogli di stile, immagini, ecc.). Non servirà alcuna risorsa dalla cache - ottiene nuove copie dal server senza inviare alcuna if-modified-sinceo if-none-matchintestazioni nella richiesta.

  Equivale a un utente che esegue un "ricaricamento forzato" nei browser laddove possibile.

  Si noti che il passaggio truea location.reload()è supportato in Firefox (vedi MDN ) e Internet Explorer (vedi MSDN ) ma non è supportato universalmente e non fa parte della specifica W3 HTML 5 , né della bozza W3 specifica HTML 5.1 , né della 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 nuova copia non memorizzata nella cache dell'HTML della pagina stessa ed eseguendo richieste di riconvalida di RFC 7234 per qualsiasi risorsa (come gli script) memorizzata nella cache del browser, anche se sono nuove, RFC 7234 consente al browser di servire senza rivalutazione.

  location.reload()Non è possibile specificare o documentare esattamente come il browser dovrebbe utilizzare la sua cache quando si esegue una chiamata; Ho determinato il comportamento sopra mediante la sperimentazione.

  Ciò equivale all'utente semplicemente premendo il pulsante "aggiorna" nel proprio browser.

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

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

  Ricarica la pagina senza recuperare o riconvalidare eventuali nuove risorse dalla cache. Se lo stesso HTML della pagina è aggiornato, questo ricaricherà la pagina senza eseguire alcuna richiesta HTTP.

  Ciò equivale (dal punto di vista della memorizzazione nella cache) all'utente che apre la pagina in una nuova scheda.

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

  Ancora una volta, il comportamento della cache qui non è specificato per quanto ne so; L'ho determinato testando.

Quindi, in sintesi, si desidera utilizzare:

• location = locationper il massimo utilizzo della cache, purché la pagina non abbia un hash nel suo URL, nel qual caso non funzionerà
• location.reload(true)recuperare nuove copie di tutte le risorse senza riconvalidare (anche se non è universalmente supportato e non si comporterà in modo diverso rispetto location.reload()ad alcuni browser, come Chrome)
• location.reload() per riprodurre fedelmente l'effetto dell'utente facendo clic sul pulsante "aggiorna".

window.location.reload() verrà ricaricato dal server e caricherà nuovamente tutti i dati, gli script, le immagini, ecc.

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

La Loadfunzione jQuery può anche eseguire un aggiornamento della pagina:

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

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

Semplice soluzione JavaScript semplice :

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

location.reload();

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

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

Ciò significa che ci sono due modi:

Soluzione 1: forzare il ricaricamento della pagina corrente dal server

location.reload(true);

Soluzione 2: ricaricare dalla cache o dal server (in base al browser e alla configurazione)

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

E se si desidera combinare con jQuery l'ascolto di un evento, si consiglia di utilizzare il metodo ".on ()" anziché ".click" o altri wrapper di eventi, ad esempio una soluzione più adeguata sarebbe:

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

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>

Appunti:

• L'utilizzo $.ajaxdiretto di like $.get('',function(data){$(document.body).html(data)}) fa sì che i file css / js vengano cancellati dalla cache , anche se si usa cache: true, ecco perché usiamoparseHTML
• parseHTMLNON troverò un bodytag quindi tutto il tuo corpo deve andare in un div extra, spero che questa pepita di conoscenza ti aiuti un giorno, puoi indovinare come abbiamo scelto l'id per quellodiv
• Utilizzare http-equiv="refresh"nel caso in cui qualcosa vada storto con il singhiozzo javascript / server, quindi la pagina si ANCORA ricaricherà senza ricevere una telefonata
• Questo approccio probabilmente perde la memoria in qualche modo, l' http-equivaggiornamento lo risolve

ho trovato

window.location.href = "";

o

window.location.href = null;

effettua anche un aggiornamento della pagina.

Questo rende molto più semplice ricaricare la pagina rimuovendo qualsiasi hash. Questo è molto bello quando sto usando AngularJS nel simulatore iOS, quindi non devo rieseguire l'app.

Puoi usare il metodo JavaScript location.reload() . Questo metodo accetta un parametro booleano. trueoppure false. Se il parametro è true; la pagina viene sempre ricaricata dal server. Se lo è false; che è l'impostazione predefinita o con un browser di parametri vuoto ricaricare la pagina dalla sua cache.

Con trueparametro

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

Con default/ falseparametro

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

Non hai bisogno di nulla da jQuery, per ricaricare una pagina usando JavaScript puro , basta usare la funzione di ricarica sulla proprietà location come questa:

window.location.reload();

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

Se desideri forzare il ricaricamento della pagina, passa un valore vero per ricaricare il metodo come di seguito ...

window.location.reload(true);

Inoltre, se sei già nell'ambito della finestra , puoi sbarazzarti della finestra e fare:

location.reload();

uso

location.reload();

o

window.location.reload();

Utilizzare onclick="return location.reload();"all'interno del tag pulsante.

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

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

Volevo nascondere un iframe da una pagina quando facevo clic su oh an h3, per me ha funzionato, ma non sono stato in grado di fare clic sull'elemento che mi ha permesso iframedi iniziare, a meno che non abbia aggiornato manualmente il browser ... non è l'ideale.

Ho provato quanto segue:

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

Mescolare javascript Jane semplice 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);

Tutte le risposte qui sono buone. Poiché la domanda specifica sul ricaricare la pagina conjquery, Ho solo pensato di aggiungere qualcosa di più per i futuri lettori.

jQuery è una libreria JavaScript multipiattaformaprogettata per semplificare lo scripting HTML lato client.

^{~ Wikipedia ~}

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

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

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

Esistono molti modi per ricaricare le pagine correnti, ma in qualche modo usando quegli approcci puoi vedere la pagina aggiornata ma non con pochi valori di cache ci saranno, quindi supera quel problema o se desideri effettuare richieste complesse, usa il codice qui sotto.

    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>

Soluzione Javascript semplice:

 location = location; 

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

Probabilmente il più breve (12 caratteri) - usa la cronologia

history.go()

Puoi scriverlo in due modi. Il primo è il modo standard di ricaricare la pagina chiamato anche come semplice aggiornamento

location.reload(); //simple refresh

E un altro si chiama hard refresh . Qui si passa l'espressione booleana e la si imposta su true. Questo ricaricherà la pagina distruggendo la cache più vecchia e visualizzando i contenuti da zero.

location.reload(true);//hard refresh

È il più breve in JavaScript.

window.location = '';

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

Ecco alcune righe di codice che è possibile utilizzare per ricaricare la pagina utilizzando jQuery .

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

Usa questo se vuoi solo un feeling jQuery sul tuo codice e non ti interessa la velocità / prestazioni del codice.

Basta scegliere da 1 a 10 che si adattano alle tue esigenze o aggiungine altri in base allo schema 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>