javascript - 通过 AJAX 从 PHP 后端加载菜单

Question

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

现在它的表演

http://adrianalegria.com/#page1

但我想要

http://adrianalegria.com/News

菜单中有 7 页。

这是索引中的代码:

<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');

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

Answer 1

这可以通过 JavaScript PushState 来完成

示例

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