Change page content according to url

Question

I have a backend that handles requests like

http://mysite/A.html // return A.html
http://mysite/B.html // return B.html
http://mysite/C.html // return C.html

Now I need to add site menu to visit A,B,C pages from it without page reloading. And If I load page A.html, then click on B in the menu, page B should be displayed and url becomes http://mysite/A.html#B .

So I need somehow write code to allow user to make such requests:

 http://mysite/A.html // show A.html
 //...same for B.html, C.html
 http://mysite/A.html#B // show B.html
 http://mysite/C.html#A // show A.html
 //...etc

As far as I know PHP backend can't handle # in the url, so I need to use Js. So guys, any ideas here?

Currently If I handle request http://mysite/A.html#B , I load A.html from PHP backend then manually replace page content with B.html using JQuery.

PS: My current method shows page A.html for a sec before replacing itself to B.html which is bad for me.

Answer 1

You could use the jQuery Ajax GET method to return the HTML contents of another page.

jQuery

$('a').on('click', function(e) {
e.preventDefault();
var ID = $(this).attr('href');
$.get(ID, function(data) {
$('#MyReturnDiv').html(data);
});
});

HTML

<a href="directory of return/A.html">A</a>
<a href="directory of return/B.html">B</a>
<a href="directory of return/C.html">C</a>

<div id="MyReturnDiv"></div>