If you need to change URL without Reloading Page using jquery ajax PHP, You are reading a greater tutorial. In this tutorial, You will get a standard script with a simple example. This script will help you to redirect different types of page navigation without Refreshing.
To rank fast in the google search engine, a Web application must be reloaded within a few seconds. At this moment. So, You should develop a lightweight application that can take less time to reload the page.
If you use this script in your application, Your application will be lightweight & user-friendly. Even It will Quickly reload the page.
Contents
How to Change URL Without Reloading Page Using jQuery Ajax
If you want to develop a changing URL without reloading the page using jquery ajax. you will have to understand the following points
- First of all, Create a navigation link using HTML.
- Prevent from the refreshing page.
- Change URL without reloading clicking navigation links using jquery.
- Get Page content using a PHP script and send a response to jquery ajax script.
- The Load page content of the current URL using ajax.
Read Also
Load More Data on Infinite Scroll Using Ajax
Create a Portfolio Gallery Using jQuery
Now, You should create the following folder structure before starting coding.
myproject |__redirect-ajax.js |__page-content.php |__header.php |__footer.php |__index.php |__page1.php |__page2.php |__page3.php |__page4.php |__page5.php
Even you can use the following basic CSS code to design navigation links.
<style type="text/css">
.menu li a{
text-decoration: none;
color: white;
font-size: 18px;
}
.menu li{
display: inline-block;
background: #e74304;
padding: 5px 15px;
margin: 5px;
}
</style>1. Change URL without Reloading Using jQuery Ajax.
You have to implement the following process to redirect the page without refresh using jquery ajax. It will be helpful to understand the given script.
- First of all, fire click event on the navigation link a.nav-link.
- Prevent page refreshing using e.preventDefault() method.
- Get Current URL on clicking a navigation link and store it in
pageURL - Change URL without reloading the page using history.pushState(null, ”, pageURL)
- Get page content from page-content.php file passing the current page URL
pageURLthroughpageobject. - Insert current page content into div
id ="pageContent"to display on a web browser.
File Name – redirect-ajax.js
$(document).on('click','a.nav-link', function(e){
e.preventDefault();
var pageURL=$(this).attr('href');
history.pushState(null, '', pageURL);
$.ajax({
type: "GET",
url: "page-content.php",
data:{page:pageURL},
dataType: "html",
success: function(data){
$('#pageContent').html(data);
}
});
});
2. Get Page Content on Ajax Request Using PHP
In this page, get current page URL using $_GET[] method. Its current page URL not empty and exists in the main folder, the current page will be included with content in page-content.php file.
File Name – page-content.php
<?php
if(!empty($_GET['page'])){
$page= trim($_GET['page']);
if(file_exists($page)){
include($page);
}else{
include('404.php');
}
}
else{
echo "This anchor tage has no url";
}
?>
Create a header with the navigation links to the redirect the page.
<?php
if(empty($_GET['page'])){
?>
<ul class="menu">
<li><a href="index.php" class="nav-link">Home</li>
<li><a href="page1.php" class="nav-link">Page 1</a></li>
<li><a href="page2.php" class="nav-link">Page 2</a></li>
<li><a href="page3.php" class="nav-link">Page 3</a></li>
<li><a href="page4.php" class="nav-link">Page 4</a></li>
<li><a href="page5.php" class="nav-link">Page 5</a></li>
</ul>
<?php
}
?>
Create footer and include jQuery CDN & ajax script file redirect-ajax.js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<?php
if(empty($_GET['page'])){
?>
<script type="text/javascript" src="redirect-ajax.js"></script>
<?php } ?>
5. Create pages to redirect without Refreshing
Create the following required files to redirect on clicking a navigation link.
File Name – index.php
<?php
include('header.php');
?>
<div id="pageContent">
</div>
<?php
include('footer.php');
?>
File Name – page1.php
<?php
include('header.php');
?>
<!--====page 1 content======-->
<div class="main-content" id="<?php echo empty($_GET['page'])?'pageContent':''?>">
<h1>This is Page -1 </h1>
</div>
<!--===== page 1 content ======-->
<?php
include("footer.php");
?>File Name – page2.php
<?php
include('header.php');
?>
<!--====page 2 content======-->
<div class="main-content" id="<?php echo empty($_GET['page'])?'pageContent':''?>">
<h1>This is Page -2 </h1>
</div>
<!--===== page 2 content ======-->
<?php
include("footer.php");
?>File Name – page3.php
<?php
include('header.php');
?>
<!--====page 3 content======-->
<div class="main-content" id="<?php echo empty($_GET['page'])?'pageContent':''?>">
<h1>This is Page -3 </h1>
</div>
<!--===== page 3 content ======-->
<?php
include("footer.php");
?>File Name – page4.php
<?php
include('header.php');
?>
<!--====page 4 content======-->
<div class="main-content" id="<?php echo empty($_GET['page'])?'pageContent':''?>">
<h1>This is Page -4 </h1>
</div>
<!--===== page 4 content ======-->
<?php
include("footer.php");
?>File Name – page5.php
<?php
include('header.php');
?>
<!--====page 5 content======-->
<div class="main-content" id="<?php echo empty($_GET['page'])?'pageContent':''?>">
<h1>This is Page -5 </h1>
</div>
<!--===== page 5 content ======-->
<?php
include("footer.php");
?>Suggestion
I have provided the best script to change URL without reloading page using jQuery ajax php. It is very simple to integrate into your project. If you have any problem using it, ask me through below comment box.
If you like this tutorial and It is useful then share it with your friends. I will share more jQuery ajax tutorials on this blog site. So, Continue to visit to learn more web coding with me.
Leave a Reply