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
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 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.phpfile passing the current page URLpageURLthroughpageobject. - 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";
}
?>
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
}
?>
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.