jQuery has a number of built-in AJAX functions and $.ajax() or jQuery.ajax() is one of them.
Most of the time, we’ll use one or two of them, but there is one method that rules them all. It’s the generic version of the call and it’s simply called $.ajax().
$.ajax() is quite powerful ajax function because it enables us to pass parameters too to the PHP file to get the filtered result.
Copy the following code and paste in your .html file.
<button id="homeBtn">HOME</button> <button id="aboutBtn">ABOUT US</button> <button id="coursesBtn">COURSES</button> <span id='loadc'></span>
Put the following code before the closing body of your .html file or create a separate .js file and then link that file to your.html file.
Create 3 PHP Pages with the name myhome.php, about.php, and courses.php consecutively.
<?php echo "Home page content."; ?>
<? echo "About us page content."; ?>
<?php echo "Our Courses page content."; ?>
Note: keep all the above 3 files in the same folder where your HTML file resides.
Test your file and click on each of buttons. It will show the data coming from all the associated files without refreshing the page.