If you are beginner then this post is for you. For showing the new content on page without refresh we will use jQuery and server side php. In this article, i will demonstrate to show the latest content from server without refreshing the page. This is useful in case of showing like unlike button , showing latest content , changing the data on user request.
In this tutorial we will take example of Changing content of element on click and check status.
Let’s start the tutorial with steps:
Step 1: Create a html file
First step is to create the html and setup basic elements of page.
<!DOCTYPE html>
<html>
<body>
<h2>Change content without reloading page - Readerstacks.com</h2>
<div id="content">
<h1>This is a dummy content, i am going to change it</h1>
<p>Let's change it with jquery click</p>
</div>
<div class="footer">
<button id="load_btn">Load New </button>
</div>
</body>
</html>
Step 2: Add jQuery
So, we are going to use jQuery to update the content
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
Step 3: Add jQuery code to change content
We have created content and included jQuery , so now it’s time to apply the logic
<script>
$(function(){
$("#load_btn").click(function(){
$("#content").load("http://localhost/refresh_page_jquery/new_dynamic_content.php");
});
});
</script>Here, we added click event to load_btn and using load method of query to change the content. we can also append some fragment of loaded content using below example
$( "#content" ).load( "ajax/test.html #new_content" );Using get or post method to update the content
<script>
$(function(){
$("#load_btn").click(function(){
$.get('http://localhost/refresh_page_jquery/new_dynamic_content.php',function(data){
$('#content').html(data);
})
});
});
</script>Below is the live screenshot
