Question

我正在尝试使用AJAX从新页面加载内容。我正在研究的测试网站是dev.dog-company.com。

这是我的代码：

$('a[rel="load"]').click(function(){
    //var siteurl = ""; 
    var link = $(this).attr("href");
    $(this).attr("href", '#');
    $('#slider-wrapper').slideUp();
    $('#content').wrap('<div id="wrap"></div>').css('opacity', '0.75').css('background-color', 'black');
    $.ajax({
        type: 'POST',
        url: link,
        success : function(data){
            var response = $(data);
            var head= response.find('head');
            var slider = response.find('#slider-wrapper');
            var content = response.find('#content');
            $('#content').unwrap('<div id="wrap"></div>')
            jQuery("head").html(head);
            if(slider != null)
                jQuery("#slider-wrapper").html(slider).slideDown();
            jQuery("#content").html(content);
            return false;
        }
    $(this).attr("href", link);

    })
    });

我正在尝试在点击时加载内容，但每次重新加载页面而不点击工作。此外，我不确定除了我正在对我的代码所做的事情之外，我是否还需要做其他事情。 rel =“load”仅在home，info-＆gt; AboutUs＆amp;常见问题。

感谢您的帮助。

更新

我仍然无法让它发挥作用。这是我的最新代码。该网站仍在运行它。当我使用chrome的调试时，它永远不会通过我的代码。这是引起问题的re =“load”吗？

更新

我最初的问题是没有准备好文件。但我不认为我解析信息的方式不起作用。我试过找到并过滤两者似乎都无法正常工作。此外，如何在推送帖子后更改浏览器中的网址。

更新

经过大量的讨论后，我得到了部分工作。我不能做的一件事就是取代头部。然后在滑块中推送的数据存在，但它似乎在网站上不起作用。它不像我在代码中那样向下滑动。

$('document').ready(function() {
$('a[rel="load"]').click(function(e){
    //var siteurl = ""; 
    e.preventDefault();
    var link = $(this).attr("href");
    $('#slider-wrapper').slideUp();
    $('#content').wrap('<div id="wrap-overlay"></div>');
    /*$('#wrap').css({
        'opacity': '0.75',
        'background-color': 'black',
        'z-index' : '10'
        });*/
    $.ajax({
    //ajax setting
        type: 'POST',
        url: link,
        dataType: 'html',
        success : function(data){
            //parse data
            var response = $("<div>").html(data);
            console.log(typeof(response));
            console.log(response);
            //var head = response.find('<head>').html();
            slider = response.find('#slider-wrapper').html();
            var content = response.find('#content').html();
            console.log(content);
            //console.log(head);
            //console.log(slider);
            //Post data
            $('#content').unwrap();
            //jQuery("head").empty().append(head);
            if(slider != null){
                jQuery("#slider-wrapper").empty().slideDown().append(slider);
            }
            jQuery("#content").empty().append(content);
            return false;
        }
    })
    });
});

Answer 1

试试这个：

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

您需要在链接点击停止默认浏览器行为，这是跟随它。

AJAX加载页面而无需重新加载

1 个答案: