javascript - 为什么我的 div 填充了我的整个页面？

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>

score 2 · Accepted Answer

如果你想用 ajax 获取页面的一部分，那么你可以使用元素的load方法id来获取内容。

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

更多信息load()：信息

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

如果您想选择使用 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 );
            }});
    });

score 0 · Accepted Answer

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

代替

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

您可以使用

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

文档在这里。

javascript - 为什么我的 div 填充了我的整个页面？

4 回答 4

Related

Reference