How to do partial page update with jQuery?

I have navigation menu. When clicked, only page content div 开发者_如何学Pythonshould be updated from html content file (that in the server) without doing a full page refresh.

How can I achieve this using jQuery?

Build your menu as per usual, i.e.

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

And a placeholder for the content.

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

Then run code similar to this

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

You need to use the jQuery AJAX methods to accomplish this. There are several ways to go about it. For instance:

Say you have a div with id="mydiv" that you wish update with content from the server. Then:

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

will cause mydiv to be updated with the content returned from url.

This link describes various AJAX methods in jQuery.

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

See load

Description: Load data from the server and place the returned HTML into the matched element.

create a div element and update the contents.

<div id="refreshblock"> </div> assume that this is the block

on the button click , make a ajax call and get the results once you get the results process them and update the above div

('#refreshoblock).html(results);

It will update the page without doing a post back

you can do it, with help of 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>

for details info you can find here: partial page refresh code