Only update part of page

Question

I have recently created a website that allows users to upload images and then let that user and other users of the website rate the images from 1-10. Everything is working correctly. When the user rates an image this is saved and then another random box is generated and presented to the user. This works by adding the new box id (randomly generated) to the query string. This allows for the user to navigate back to the images that they have just seen.

My problem comes with updating the page. Currently my code processes the rating and saves it within the database then redirects the user to the same page where I have some code to find a random image id from the database and then using that id redirects them again to the same page with the id in the querystring. This works fine however i would like to make it so that only the image and the images information (image name rating etc..) are updated and the rest of the HTML (Header, Navigation, Side bars, Footer, etc...) is not.

From my understanding you can upload part of a website using JQuery/Javascrip/AJAX? However this would not allow the user to redirect back to the previously viewed image?

If you would like any more information please ask.

EDIT

I have took some of the information on board and have altered my code to use hash values my code is below:

HTML

<img id="design" alt="" width="300" height="300"  />
<input type="button" id="GetImage" value="Get Image" />

JQUERY

$(document).ready(function(){

    $("#GetImage").click(function() {

        $.ajax({ //Make the Ajax Request
                 type: "POST",
                 url: "testimagelook.php", //file name
                 success: function(server_response){
                    var id = server_response;
                    document.location.hash = id;
                    $('#design').attr('src','img/boxes/'+id+'.png');
                 }
        });
    });

});

The php file testimagelook.php connects to the database and brings back a random id of one of my images. This code works fine for showing the image and saving the id of the image in the hash of the URL allowing me to preserve the users history of images. However I am unsure on how I would retrieve the previous hash value and reload the image with the correct id when the user clicks the back button. Any ideas?

Answer 1

Yes you can achieve this using jQuery AJAX method
For your simplicity use this

$.post('pageURL.php', {data1: value1}, function(result) {
  // Update the portion of the page you wish to

});  

UPDATED

$.ajax({
  type: "POST",
  url: "PageName.aspx/MethodName",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(data) {
    // Now receive the data (information) in the form of JSON
    // In this JSON you can pass the imageID or anything to proceed your logic
    // and update the portion of the page you wish to
  }
});