一旦url通过window.pushState更新,localhost上的网站就不会在刷新时加载

时间:2013-05-12 13:11:23

标签: pushstate

一旦网址由window.pushState更新,我的网站就不会在刷新页面时加载。我的网站保存在以下位置:http://localhost/ajax.test/index.html  但在点击href =“1”的链接后,网址将更改为http://localhost/ajax.test/1   ..这是源代码:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="myscript.js"></script>

    </head>
    <body>
        <ul>
            <li class="list" id="1"><a href="1">home</a></li>
            <li class="list" id="2"><a href="2">project</a></li>
            <li class="list" id="3"><a href="3">about</a></li>
        </ul>
        <div id="dynamic"></div>
    </body>
</html>

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="myscript.js"></script> </head> <body> <ul> <li class="list" id="1"><a href="1">home</a></li> <li class="list" id="2"><a href="2">project</a></li> <li class="list" id="3"><a href="3">about</a></li> </ul> <div id="dynamic"></div> </body> </html>

jQuery的:

PHP:

var url = 0;
var state=0;
$(document).ready(function(){
            $('ul a').click(function(e) {
                e.preventDefault();
                alert(e.target);
                url = $(this).attr("href");
                history.pushState({page:url}, url,url);
                loadContent(url);

            });
        });

$(window).bind('popstate', function(e){
    state = event.state;
    if(state){
        loadContent(state.page);
    }else{
        loadContent("home");
    }
    });

    function loadContent(currentPage){
        alert(currentPage);
            $.ajax({
                type: "GET",
                url: "ajax.php",
                data: "id="+currentPage,
                success: function(data){
                    $('#dynamic').html(data);
                    }
                });

        };

0 个答案:

没有答案