0

当谈到 PHP 和 AJAX 时,我还是个新手,所以我一直遇到问题,在网上搜索了一些想法之后,我发现我做不到了。我正在寻找一种在一个主页上动态加载内容(PHP/HTML 混合)的方法。主页将包含导航,一旦单击此导航中的链接,主内容 div 中的内容就会改变。很简单,对,但我在这个话题上一直很努力。

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

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

4

3 回答 3

1

去阿贾克斯吧……几周前我也遇到过类似的情况。我对此了解不多,但这个网站很有帮助: http ://www.w3schools.com/ajax/ajax_example.asp

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

于 2013-02-12T06:58:11.983 回答
0

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

#hash这是用于确定内容的 jQuery 代码片段,因此http://example.com/#home将执行 ajax 请求$_POST['view']='home'

$(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;
于 2013-02-12T06:57:39.917 回答
0

这是一个简单的例子,让你理解:

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

于 2013-02-12T07:04:32.890 回答