在主页中动态加载PHP


Dynamically load PHP within a main page

我对PHP和AJAX还很陌生,所以我经常遇到问题,在网上搜索想法后,我发现了不足。我正在寻找一种在一个主页上动态加载内容(PHP/HTML混合)的方法。主页面将包含导航,一旦单击导航中的链接,主内容div中的内容就会发生变化。很简单,对吧,但我在这个话题上一直是个大人物。

到目前为止,我最喜欢的方法是CSS-Tricks重新思考动态页面替换内容,它使用HTML5历史API。我喜欢它允许使用前后浏览器按钮,但我无法在Chrome中使用它。

这不是你典型的"帮我弄清楚我的代码出了什么问题"的问题,所以我提前道歉。大多数情况下,我想就如何最好地找到这个问题的解决方案寻求一些建议。

使用Ajax。。。几周前我也遇到过类似的情况。我对它了解不多,但这个网站很有帮助:http://www.w3schools.com/ajax/ajax_example.asp

它有一些简单的例子,可以帮助您了解呼叫是如何工作的。我希望它能有所帮助。很难给出更具体的建议,因为你对自己的申请没有太多解释。

这可以用AJAX完成,您需要一个content/view/page锚点来确定加载了什么内容,然后您可以使用它从php、加载内容

这里有一段jQuery代码,它使用#hash来确定内容,因此http://example.com/#home将对$_POST['view']='home' 进行ajax请求

$(function(){
    // Detect hashchange (browser back/forward buttons)
    $(window).bind('hashchange', function() { 
      load_content();
    });
    // Init content
    load_content();
});
function load_content(){
    //get the hash
    var page = window.location.hash;
    page = page.substring(1);
    if(page == ''){
        page='home';
    }
    //get the content, replace any - with / so php can route to sub actions ect
    $.post("./", { 'view': page.replace("-","/") },
    function(data) {
        //load the content into the load container
        $("#load").html(data).fadeIn('slow');
    });
}
<div id="load"></div>

然后,您可以简单地在php中找到通往脚本的路径,方法是:

$route      = explode('/',$_POST['view']);
$controller = (!empty($route[0])) ? $route[0] : null;
$action     = (!empty($route[1])) ? $route[1] : null;

这里有一个简单的例子可以让您理解:

点击导航链接进行ajax调用,

<p id="test">CLICK ME</p>
<p id="result">Your result</p>

脚本标记中的Ajax代码如下:

$(document).ready(function() {  
$("#test").click(function(){
    $.ajax({
        url : 'testing.php',
        type : 'GET',
        async : 'true',
        cache : 'false',
        success : function(data, textStatus, xhr)
        {
            $('#result').empty().html(data);
        },
    });
});
});

注意:ajax调用url可以是php或html页面,甚至可以是文本文件,您可以在主页面分区中显示结果。