通过 AJAX 将 PHP 文件加载到 DIV答案

【问题标题】：Loading PHP file into DIV via AJAX通过 AJAX 将 PHP 文件加载到 DIV
【发布时间】：2013-05-07 14:24:20
【问题描述】：

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

page.php 又拥有自己的链接，我想要它，这样当您单击其中一个链接时，它会将相应的页面加载到相同的“wrapper”div 中。

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

【问题讨论】：

你是在使用 vanilla JS 还是像 jQuery 这样的库来加载 AJAX？
将page.php 放入<iframe>
我正在使用 jQuery……出于安全原因，我不想使用 iframe。

标签： php ajax wrapper

【解决方案1】：

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() {
        });
    }

【讨论】：

我需要查看更多代码才能为您提供真正的复制/过去的答案，但您可以使用它来检测单击了哪个按钮、要加载哪些内容以及将结果放在哪里.
这里最好使用委托，否则每次加载新内容时都需要运行...$(document).on('click', 'div.wrapper a[href]', function (e) { /* your link handling */});

【解决方案2】：

我会将 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 类（或任何你想要的），你就可以开始了。

【讨论】：

您是否在现有的$(document).ready 调用中包含了 loadWrapper 函数调用？为了避免混淆，我去掉了包装器，只需将 loadWrapper 调用放在现有的 ready 函数中即可。 编辑： 我刚刚注意到您在别人的回答中遇到了同样的问题。你过去成功加载过page.php吗？它会在没有 AJAX 的情况下加载到您的浏览器中吗？因为页面本身可能会损坏。
是的，我包括了 loadWrapper。 page.php 本身也可以在浏览器中运行。
和page.php 与页面index.php 在同一个文件夹中？还是在子文件夹中？
是的。它在同一个文件夹中。
我简单地尝试了这个：但它仍然没有显示 page.php .....

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

使用 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');

【讨论】：