Change URL Without Reloading Page Using jQuery Ajax PHP

If you need to change the 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.

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

How to Create Dependent Dropdown using ajax, PHP & MySQL

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 basic CSS code to design navigation links. So, link the following CSS file in the index.php, page1.php, page2.php, page3.php, page4.php & page5.php

File Name – style.css

.menu li a{
   text-decoration: none;
   color: white;
   font-size: 18px;
}
.menu li{
    display: inline-block;
    background: #e74304;
    padding: 5px 15px;
    margin: 5px;
}

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 the Current URL by 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 pageURL through page object.
• 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

On this page, get the current page URL using $_GET[] the 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 the 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";
}
?>

3. Create Header with Page Navigation

Create a header with the navigation links to redirect the page

File Name – header.php

<?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

}
?>

4. Create Page Footer

Create footer and include jQuery CDN & ajax script file redirect-ajax.js.

File Name – footer.php

<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

<!DOCTYPE html>
<html>
<head>
  <title>Change URL without reloading page using ajax & PHP</title>
  <style type="text/css" href="style.css"></style>
</head>
<body>

<?php

 include('header.php');
?>

<div id="pageContent">
    
</div>
<?php

include('footer.php');
?>


</body>
</html>

File Name – page1.php

<!DOCTYPE html>
<html>
<head>
  <title>Change URL without reloading page using ajax & PHP</title>
  <style type="text/css" href="style.css"></style>
</head>
<body>

<?php

 include('header.php');
?>

<div class="main-content" id="<?php echo empty($_GET['page'])?'pageContent':''; ?>">
    
</div>
<?php

include('footer.php');
?>


</body>
</html>

File Name – page2.php

<!DOCTYPE html>
<html>
<head>
  <title>Change URL without reloading page using ajax & PHP</title>
  <style type="text/css" href="style.css"></style>
</head>
<body>

<?php

 include('header.php');
?>

<div class="main-content" id="<?php echo empty($_GET['page'])?'pageContent':''; ?>">
    
</div>
<?php

include('footer.php');
?>


</body>
</html>

File Name – page3.php

<!DOCTYPE html>
<html>
<head>
  <title>Change URL without reloading page using ajax & PHP</title>
  <style type="text/css" href="style.css"></style>
</head>
<body>

<?php

 include('header.php');
?>

<div class="main-content" id="<?php echo empty($_GET['page'])?'pageContent':''; ?>">
    
</div>
<?php

include('footer.php');
?>


</body>
</html>

File Name – page4.php

<!DOCTYPE html>
<html>
<head>
  <title>Change URL without reloading page using ajax & PHP</title>
  <style type="text/css" href="style.css"></style>
</head>
<body>

<?php

 include('header.php');
?>

<div class="main-content" id="<?php echo empty($_GET['page'])?'pageContent':''; ?>">
    
</div>
<?php

include('footer.php');
?>


</body>
</html>

File Name – page5.php

<!DOCTYPE html>
<html>
<head>
  <title>Change URL without reloading page using ajax & PHP</title>
  <style type="text/css" href="style.css"></style>
</head>
<body>

<?php

 include('header.php');
?>

<div class="main-content" id="<?php echo empty($_GET['page'])?'pageContent':''; ?>">
    
</div>
<?php

include('footer.php');
?>


</body>
</html>

My 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 about web coding with me.