在主页中动态加载 PHP答案

【问题标题】：Dynamically load PHP within a main page在主页中动态加载 PHP
【发布时间】：2013-02-12 06:43:13
【问题描述】：

在 PHP 和 AJAX 方面我还是个新手，所以我经常遇到问题，在网上搜索了一些想法后，我发现我的想法很短。我正在寻找一种在一个主页上动态加载内容（PHP/HTML 混合）的方法。主页将包含导航，一旦单击此导航中的链接，主内容 div 中的内容就会改变。很简单，对，但我在这个话题上一直很挣扎。

到目前为止，我最喜欢的方法是 CSS-Tricks Rethinking Dynamic Page Replacing Content，它使用 HTML5 History API。我喜欢它允许使用后退和前进浏览器按钮，但我无法让它在 Chrome 中工作。

这不是典型的“帮我弄清楚我的代码出了什么问题”的问题，所以我提前道歉。大多数情况下，我正在寻找一些关于如何最好地解决这个问题的建议。

【问题讨论】：

使用 jquery。研究jqfundamentals.com/chapter/jquery-basics 和w3schools.com/jquery/jquery_examples.asp。您将能够申请 jqeury。

标签： php jquery ajax

【解决方案1】：

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

它有一些简单的例子可以帮助你理解调用是如何工作的。我希望它有所帮助。很难给出更具体的建议，因为你没有对你的应用做太多解释。

【讨论】：

【解决方案2】：

这可以通过 AJAX 来完成，您需要一个内容/视图/页面锚来确定加载的内容，然后您可以使用它从您的 php 加载内容，

这是一个使用#hash 来确定内容的jQuery 代码的sn-p，因此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;

【讨论】：

您可以在here Tho 看到一个演示，必须启用 JavaScript。

【解决方案3】：

这里有一个简单的例子让你明白：

在点击导航链接时进行 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 页面，甚至可以是文本文件，您可以将结果显示在主页分区上。

【讨论】：