Question

对于PHP和AJAX，我是一个新手，所以我一直遇到问题，在网上搜索想法后，我做得很简短。我正在寻找一种在一个主页面上动态加载内容（PHP / HTML混合）的方法。主页面将包括导航，一旦点击此导航中的链接，主内容div中的内容将发生变化。非常简单，对，但我在这个主题上一直是一个很大的斗争。

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

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

Answer 1

与Ajax一起去......几周前我的情况类似。我对此并不了解，但这个网站非常有帮助： http://www.w3schools.com/ajax/ajax_example.asp

它有一些简单的例子可以帮助您了解调用的工作原理。我希望它有所帮助。由于您没有详细解释您的申请，因此很难提供更具体的建议。

Answer 2

这可以通过AJAX完成，您需要一个内容/视图/页面锚点来确定加载了哪些内容，然后您可以使用它来加载来自您的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;

Answer 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页面，甚至是文本文件，你可以在主页面部分显示结果。

在主页面中动态加载PHP

3 个答案: