• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Home
  • About Us
  • Django
  • Laravel
  • Interview Questions
  • Tips

CodingStatus

- Learn Coding to Build Web Applications

  • JavaScript
  • jQuery
  • ReactJS
  • Ajax
  • Node.js
  • PHP
  • SQL

Change URL Without Reloading Page Using jQuery Ajax PHP

June 24, 2021 By Md Nurullah 3 Comments

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.

change url without reloading page using ajax jquery php

 

Contents

  • How to Change URL Without Reloading Page Using jQuery Ajax
    • 1. Change URL without Reloading Using jQuery Ajax.
    • 2. Get Page Content on Ajax Request Using PHP
    • 3. Create Header with Page Navigation
    • 4. Create Page Footer
    • 5. Create pages to redirect without Refreshing
    • My Suggestion

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.

Related Posts:

  • Login With Google Account on Website Using PHP MySQL
  • Javascript Redirect URL to Another Web Page
  • How to Learn Web Designing From Basics
  • How to Learn Web Development Step by Step

Filed Under: Ajax

Hey there, Welcome to CodingStatus. My Name is Md Nurullah from Bihar, India. I'm a Software Engineer. I have been working in the Web Technology field for 3 years. Here, I blog about Web Development & Designing. Even I help developers to build the best Web Applications.

Reader Interactions

Comments

  1. Jefmam Jasond says

    June 28, 2021 at 12:53 pm

    On clicking on any link, it takes me to the 404.php page.
    Why isnt the link loading?

    Reply
    • Md Nurullah says

      July 17, 2021 at 4:17 pm

      read carefully then implement it

      Reply
  2. google says

    May 29, 2022 at 3:34 am

    Thanks for sharing your thoughts on google. Regards

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Follow us

  • facebook
  • twitter
  • linkedin

Recent Posts

  • PHP Interview Questions and Answers
  • Upload Multiple Files to Store in MySQL Database Using PHP
  • How to Insert Data Using Ajax in PHP
  • SQL Join 3 Tables – Join Query for Three Tables
  • Load Records on Select Box using Ajax, PHP & MySQL
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2022 CodingStatus - All Rights Reserved