cómo hacer una actualización de página parcial con jquery

Question

Tengo un menú de navegación cuando hago clic solo un contenido div en la página debe actualizarse desde archivos html contect que en el servidor sin hacer una actualización de página completa, ¿cómo puedo lograr esto usando jquery?

Answer 1

Construir su menú como de costumbre, es decir

<ul id="menu"> 
    <li><a href="about-us.html">About Us</a> 
    <li><a href="services.html">Services</a> 
    <li><a href="products.html">Products</a> 
</ul> 

Y un marcador de posición para el contenido.

<div id="content"></div> 

A continuación, ejecute un código similar a este

$("#menu li a").click(function(e) { 
    // prevent from going to the page 
    e.preventDefault(); 

    // get the href 
    var href = $(this).attr("href"); 
    $("#content").load(href, function() { 
     // do something after content has been loaded 
    }); 
}); 

Answer 2

Ver load

Descripción: Cargar datos desde el servidor y coloque el HTML devuelto en el elemento coincidente.

Answer 3

crear un elemento div y actualizar los contenidos.

<div id="refreshblock"> </div> suponer que este es el bloque

en el clic de botón, hacer una llamada AJAX y obtener los resultados una vez que obtenga los resultados a procesar y actualizar el div por encima de

('#refreshoblock).html(results); 

Se actualizará la página sin hacer una publicación atrás

Answer 4

Debe usar los métodos jQuery AJAX para lograr esto. Hay varias formas de hacerlo. Por ejemplo:

Digamos que tiene un div con id = "mydiv" que desea actualizar con el contenido del servidor. Entonces:

$("#mydiv").load("url"); 

hará que mydiv se actualice con el contenido devuelto desde la url.

This link describe varios métodos AJAX en jQuery.

Answer 5

$('#myLink').click(function(){ 
    $.get('url.php', function(data){ // or load can be used too 
     $('#mydiv').html(data); 
    }); 
}); 

Answer 6

puede hacerlo, con la ayuda de jQuery (Ajax)

<div id="leftDiv"> 
<s:include value="/pages/profile.jsp"></s:include> 
</div> 
<div> 
<a href="#" id="idAnchor">Partial Refresh</a> 
</div> 
<script language="JavaScript" type="text/javascript"> 
$(document).ready(function(){ 
$('#idAnchor').click(function(){ 

$.ajax({ 
     url: 'getResultAction', // action to be perform 
     type: 'POST',  //type of posting the data 
     data: { name: 'Jeetu', age: '24' }, // data to set to Action Class 
     dataType: 'html', 
     success: function (html) { 
     ('#leftDiv).html(html); //set result.jsp output to leftDiv 
    }, 
    error: function(xhr, ajaxOptions, thrownError){ 
     alert('An error occurred! ' + thrownError); 
    }, 
    }); 
}); 
}) 
</script> 

para más detalles información que pueda encuentre aquí: partial page refresh code