AJAX從PHP后端加載的菜單

Question

我在“索引”頁面上有一個菜單，我已經有一個代碼，但是我想更改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');

謝謝，是我的第一個問題，希望我可以向大家學習！！

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

Answer 2

使用history.pushState()

JS

$('ul li a').click(function (e){

        history.pushState({}, "", $(this).html());
        checkURL(this.hash);

});

Answer 3

<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>

JAVASCRIPT

$(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'));
        });
    });
});