AJAX 从 PHP 后端加载的菜单

我在索引页面中有一个菜单，我已经有一个代码，但我想更改 URL 以获得更具体的 URL。

现在它的节目

http://adrianalegria.com/#page1

但我要

http://adrianalegria.com/News

菜单中有 7 页。

这是index中的代码：

<ul id="app-menu">
       <li  >
        <a href="#page1" >News</a>
       </li>
       <li >
        <a href="#page2" >Dates</a>
       </li>
       <li >
        <a  href="#page3" >Biography</a>
       </li>
       <li >
        <a  href="#page4" >Discography</a>
       </li>
       <li >
        <a  href="#page5" >Social</a>
       </li>
       <li >
        <a  href="#page6" >Radio</a>
       </li>
       <li >
        <a href="#page7" >Contact</a>
       </li>
     </ul>
     <div id="pageContent"></div>

这是 Js：

 $(document).ready(function(){
    checkURL();
    $('ul li a').click(function (e){
            checkURL(this.hash);
    });
    //filling in the default content
    default_content = $('#pageContent').html();

    setInterval("checkURL()",250);
});
var lasturl="";
function checkURL(hash)
{
    if(!hash) hash=window.location.hash;
    if(hash != lasturl)
    {
        lasturl=hash;
        // FIX - if we've used the history buttons to return to the homepage,
        // fill the pageContent with the default_content
        if(hash=="")
        $('#pageContent').html(default_content);
        else
        loadPage(hash);
    }
}

function loadPage(url)
{
    url=url.replace('#page','');
    $('#loading').css('visibility','visible');
    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,
        dataType: "html",
        success: function(msg){
            if(parseInt(msg)!=0)
            {
                $('#pageContent').html(msg);
                $('#loading').css('visibility','hidden');
            }
        }
    });
}

这里是 PHP：

if(!$_POST['page']) die("0"); 
$page = (int)$_POST['page'];
if(file_exists('subCat/'.$page.'.html')) 
echo file_get_contents('subCat/page_'.$page.'.html');

谢谢，这是我的第一个问题，希望我能向大家学习！！

function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

$('ul li a').click(function (e){
        history.pushState({}, "", $(this).html());
        checkURL(this.hash);
});

<ul id="app-menu">
       <li  >
        <a href="page1" >News</a>
       </li>
       <li >
        <a href="page2" >Dates</a>
       </li>
       <li >
        <a  href="page3" >Biography</a>
       </li>
       <li >
        <a  href="page4" >Discography</a>
       </li>
       <li >
        <a  href="page5" >Social</a>
       </li>
       <li >
        <a  href="page6" >Radio</a>
       </li>
       <li >
        <a href="page7" >Contact</a>
       </li>
     </ul>
     <div id="pageContent"></div>

$(document).ready(function(){
    $('ul li a').on('click', function (e){
        e.preventDefault();
        var data = 'page='+ $(this).attr('href');         
        $.get(url, data, function(resultData){
            $('#pageContent').html(default_content);
            window.history.pushState({"pageTitle":"New Title"},"", $(this).attr('href'));
        });
    });
});