Question

我正在尝试使用ajax从另一个页面加载div，但使用History API维护URL完整性。 ajax和历史部分正在工作（即div正在加载并且url正在改变）但由于某种原因，我的div包含我的整个页面而不仅仅是div中的意思！

原始页面和正在加载的页面div都是这种情况。

删除HTML

<!DOCTYPE html>
<html>
  <body>
    <div id="slider">
        ... all the page content
        <a rel='tab' href="p/password.jsf">Forgot password?</a>
    </div>
  </body>
</html>

JS

<script>
    $(function(){
        $("a[rel='tab']").click(function(e){

            //get the link location that was clicked
            pageurl = $(this).attr('href');

            //to get the ajax content and display in div with id 'content'
            $.ajax({
                url:pageurl + '?rel=tab',
                success: function(data){
                    $('#slider').html(data);
                }});

            //to change the browser URL to 'pageurl'
            if(pageurl!=window.location){
                window.history.pushState({path:pageurl},'',pageurl);    
            }
            return false;  
        });
    });

    /* the below code is to override back button to get the ajax content without reload*/
    $(window).bind('popstate', function() {
        $.ajax({
            url:location.pathname+'?rel=tab',
            success: function(data){
                $('#slider').html(data);
            }});
    });
</script>

Answer 1

如果要使用ajax获取页面的一部分，则可以使用load方法和元素的id来获取内容。

$('#slider').load(pageurl + '?rel=tab #container_with_content_to_fetch', function() {
  alert('callback after success.');
});

有关load()的更多信息：info

Answer 2

您可能需要停止默认点击操作。看起来好像您的链接充当了...链接。

$("a[rel='tab']").click(function(e){
    e.preventDefault();
    ...

Answer 3

您是否要选择使用ajax响应重新显示的页面的特定部分然后执行以下操作

   /* the below code is to override back button to get the ajax content without reload*/
    $(window).bind('popstate', function() {
        $.ajax({
            url:location.pathname+'?rel=tab',
            success: function(data){
               var mydiv = $('#my_div_id' , data ) // this will get the div with an id of #my_div_id
                $('#slider').html(mydiv );
            }});
    });

Answer 4

$.ajax加载整个页面。您可以使用.load()

而不是

$.ajax({ url:pageurl + '?rel=tab', success: function(data){ $('#slider').html(data); }});

你可以使用

$('#slider').load(pageurl + ' [rel=tab]');

文档为here。

为什么我的div填满了我的整个页面？

4 个答案: