php - 通过 AJAX 将 PHP 文件加载到 DIV

Question

假设我有一个index.php将 a 加载page.php到div类“ wrapper”中。

page.php反过来有自己的链接，我想要它，以便当您单击其中一个链接时，它将相应的页面加载到 SAME ' wrapper'div中。

同样，加载的页面可能有自己的链接，我想继续将内容加载到同一个 div 中。我怎样才能实现页面的这种连锁效应？

Answer 1

我会将 AJAX 调用放入一个函数中：

function loadWrapper($url){
    $('#wrapper').load($url+' > *',function(){
        $(this).on('click','a',function(e){
            e.preventDefault();
            loadWrapper($(this).attr('href'));
        });
    });
}

然后在页面加载时将点击分配给页面上最初加载的任何项目：

$('.LinkClass').on('click',function(e){
    e.preventDefault();
    loadWrapper($(this).attr('href'));
});

而且，当然，您的原始负载：

loadWrapper('page.php');

函数中的回调将允许点击事件在加载的链接上触发，以及您将来可能添加的任何其他链接.Wrapper。只需将这些链接提供给课程LinkClass（或任何您想要的），您就可以开始了。

Answer 2

jQuery / AJAX 是你的朋友：

$('#link').click(function() {
        var go = $.ajax({
            type: 'POST',
            data: {m: 'ajax', // POST Variables go here...
                linkID: $(this).val()} // $(this).val() is the value of the link clicked
        })
        .done(function(results) {
            $('#resultsDiv').html(results); // This is where your results go
        })
        .fail(function(msg) {
            alert("Error:" + msg);
        })
        .always(function() {
        });
    }

Answer 3

使用 jQuery：

var activateLinks = function() {
    $('.wrapper a[href]').click(function(){
        $('.wrapper').load($(this).attr('href'), activateLinks);
        return false;
    });
}

$('.wrapper').load('page.php', activateLinks);

要不然

$('.wrapper').on('click', 'a[href]', function() {
    $('.wrapper').load($(this).attr('href');
    return false;
}
$('.wrapper').load('page.php');

Answer 4

最好使用委托，这样您就不必为新页面上的链接运行处理程序附件。它们是自动处理的。

$(document).on('click', 'div.wrapper a[href]', 'click', function (e) {
    e.preventDefault();
    $.get($(this).attr('href'), function (html) {
       $('div.wrapper').html(html);
    });
});