¿Cómo actualizar una página usando jQuery?

Método 1: Uso de location.reload() : El método location.reload() vuelve a cargar la página web actual emulando el clic del botón de actualización en el navegador. El parámetro true opcional que se pasa al método se usa para forzar la carga de la página desde el servidor e ignorar el caché del navegador.

Sintaxis:

location.reload(true)

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to refresh a page
        using jQuery?
    </title>
      
    <script src=
        "https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to refresh a page
        using jQuery?
    </b>
      
    <p>
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes
        and interview questions.
    </p>
      
    <button type="button">
        Button to Reload page
    </button>
  
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                location.reload(true);
                alert('Reloading Page');
            });
        });
    </script>
</body>
  
</html>                    

Método 2: Uso de history.go(0): El método history.go() carga una URL del historial del navegador según el parámetro que se le haya pasado. Si el parámetro pasado es ‘0’, recarga la página actual.

Sintaxis:

history.go(0);

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to refresh a page
        using jQuery?
    </title>
      
    <script src=
        "https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to refresh a page
        using jQuery?
    </b>
      
    <p>
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes
        and interview questions.
    </p>
      
    <button type="button">
        Button to Reload page
    </button>
  
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                history.go(0);
                alert('Reloading Page');
            });
        });
    </script>
</body>
  
</html>                    

Método 3: Usar location.replace con la página actual: El método location.replace() se puede usar y pasar con location.pathname como parámetro. El location.pathname devuelve la URL actual y al pasarla a location.replace() vuelve a cargar la página actual.

Sintaxis:

location.replace(location.pathname);

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to refresh a page
        using jQuery?
    </title>
      
    <script src=
        "https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to refresh a page
        using jQuery?
    </b>
      
    <p>
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes
        and interview questions.
    </p>
      
    <button type="button">
        Button to Reload page
    </button>
  
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                location.reload(true);
                alert('Reloading Page');
            });
        });
    </script>
</body>
  
</html>                    

Producción:

  • Antes de hacer clic en el botón: antes de recargar
  • Después de hacer clic en el botón: después de recargar

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *