come eseguire l'aggiornamento parziale delle pagine con jquery

Question

Ho un menu di navigazione quando si fa clic solo su un contenuto div nella pagina dovrebbe essere aggiornato dai file contect html che nel server con l'operazione di aggiornamento di una pagina intera, come posso ottenere usando jquery?

Answer 1

Costruisci il tuo menu come al solito, vale a dire

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

E un segnaposto per il contenuto.

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

Poi eseguire codice simile a questo

$("#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

Vedi load

Descrizione: Caricare i dati dal server e posizionare il codice HTML restituito nell'elemento abbinato.

Answer 3

creare un elemento div e aggiornare il contenuto.

<div id="refreshblock"> </div> supporre che questo è il blocco

sul pulsante click, effettuare una chiamata ajax e ottenere i risultati una volta che si ottengono i risultati li elaborano e aggiornare la div sopra

('#refreshoblock).html(results); 

Si aggiorna la pagina senza fare un post indietro

Answer 4

È necessario utilizzare i metodi jQuery AJAX per ottenere ciò. Ci sono diversi modi per farlo. Ad esempio:

Supponiamo che tu abbia un div con id = "mydiv" che desideri aggiornare con contenuto dal server. Quindi:

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

causerà l'aggiornamento di mydiv con il contenuto restituito dall'URL.

This link descrive vari metodi AJAX in jQuery.

Answer 5

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

Answer 6

si può fare, con l'aiuto di 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> 

per i dettagli informazioni è possibile trova qui: partial page refresh code