我对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页面,甚至可以是文本文件,您可以在主页面分区中显示结果。