I am having a situation in which I have to make URL friendly in Totally ajax based website. What I'm actually doing is i have index.php file and has only div of id #content-container. On the other hand i made separate include files i.e Home.php About.php Contact.php. By default index.php looks like
Index.php
<body>
<div id="content-container">
<?php include 'Home.php'; ?>
</div>
</body>
Assume there is a navbar i made ajax call according to menu at navbar to be clicked something like this
<script src="../Apparel/Js/jquery.js"></script>
<script>
const content = url => {
$.ajax({
url: url,
success: function(data) {
$('#content-container').html(data);
}
})
}
if (Menu Clicked == 'Home') {
content('Home.php');
} else if (Menu Clicked == 'About') {
content('About.php')
}
if (Menu Clicked == 'Contact') {
content('Contact.php')
}
The purpose for doing this to make website something like single page application I know this would be easily done Using React Angular but the thing is I want to use of ajax in this way to make sure how this strategy will work to clear my concept.
Now the problem which I want to highlight is to make URL friendly for this type of work. Please someone let me know if there is way in which I can make URL friendly for this scenario? If inside the content container there is a content of about.php then URL should be like this localhost/myApp/about.php same as when manually type URL localhost/myApp/Contact.php it should open Contact.php
Inside the content container instead of open only his content. I want functionality of anchor tag but to avoid page refresh
You can achieve this by having a single PHP script called by ajax, passing the type of request (home, about, contact etc) as a parameter, eg using get "https://example.php?type=home", then in example.php examine the contents of type and generate the appropriate html.