You can refresh the content of a DIV element without reloading the entire page using jQuery by making an AJAX call to a server-side script that returns the updated content.
Example-1:
Step-1.
Create a DIV element on your page where you want to display the updated content. For example:
<div id="content"></div>
Step-2.
Create a server-side script that returns the updated content. For example, in PHP:
<?php
$content = "This is the updated content";
echo $content;
?>
Step-3.
Use jQuery’s $.ajax() method to make an AJAX call to the server-side script and update the content of the DIV element. For example:
$(document).ready(function(){
setInterval(function(){
$.ajax({
url: 'content.php', // URL of the server-side script
success: function(data) {
$('#content').html(data); // Update the content of the DIV element
}
});
}, 5000); // Refresh the content every 5 seconds
});
This will refresh the content of the DIV with id “content” every 5 seconds, without reloading the entire page.
Example-2
In my previous example I’ve explained you, how to refresh data on JSP page coming from Spring MVC Controller and refresh using JQuery.. You can take a look at it here.
This article will help you to understand the power of jQuery (library of JavaScript functions) with simple html page.
<pre role="document" aria-multiline="true" aria-label="Block: Preformatted" tabindex="0" class="block-editor-rich-text__editable block-editor-block-list__block wp-block is-selected wp-block-preformatted rich-text" id="block-6a9e60eb-b008-49e0-bf62-e281de88b73a" data-block="6a9e60eb-b008-49e0-bf62-e281de88b73a" data-type="core/preformatted" data-title="Preformatted" style="outline: none; min-width: 1px; transform-origin: center center; transform: translate3d(0px, 1px, 0px);"><HTML>
<HEAD>
<TITLE>Crunchify - Refresh Div without Reloading Page</TITLE>
<style type="text/css">
body {
background-image:
url('https://crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png');
}
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(
function() {
setInterval(function() {
var randomnumber = Math.floor(Math.random() * 100);
$('#show').text(
'I am getting refreshed every 3 seconds..! Random Number ==> '
+ randomnumber);
}, 3000);
});
</script>
</HEAD>
<BODY>
<br>
<br>
<div id="show" align="center"></div>
<div align="center">
<p>
by <a href="https://crunchify.com">Crunchify.com</a>
</p>
</div>
</BODY>
</pre><span style="background-color: initial; font-family: inherit; font-size: inherit;"></HTML></span>
List of all Java, jQuery, AJAX, Spring MVC Examples.