http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
我正在尝试让上面的脚本工作,但有一些更改。我需要将内容加载为php includes,而不是html字符串。我现在的主要问题是,我认为代码没有指向正确的页面,因此没有新的内容。
php:
switch($_GET['page']) {
case 'code' : $page = include ($_SERVER['DOCUMENT_ROOT'].'mysite/code.php'); break;
case 'design' : $page = include ($_SERVER['DOCUMENT_ROOT'].'mysite/design.php'); break;
case 'writing' : $page = include ($_SERVER['DOCUMENT_ROOT'].'mysite/writing.php'); break;
html:
<ul id="menu">
<li><a title="index" href="#index.php" rel="ajax"><span>home</span></a></li>
<li><a title="code" href="#code.php" rel="ajax"><span>code</span></a></li>
<li><a title="design" href="#design.php" rel="ajax"><span>design</span></a></li>
<li><a title="illustration" href="#illustration.php" rel="ajax"><span>illustration</span></a></li>
<li><a title="writing" href="#writing.php" rel="ajax"><span>writing</span></a></li>
<li><a title="links" href="#links.php" rel="ajax"><span>links</span></a></li>
<li><a title="about" href="#about.php" rel="ajax"><span>about</span></a></li>
</ul>
javascript:
<script type="text/javascript">
$(document).ready(function () {
//Check if url hash value exists (for bookmark)
$.history.init(pageload);
//highlight the selected link
$('a[href=' + document.location.hash + ']').addClass('selected');
//Seearch for link with REL set to ajax
$('a[rel=ajax]').click(function () {
//grab the full url
var hash = this.href;
//remove the # value
hash = hash.replace(/^.*#/, '');
//for back button
$.history.load(hash);
//clear the selected class and add the class class to the selected link
$('a[rel=ajax]').removeClass('selected');
$(this).addClass('selected');
//hide the content and show the progress bar
$('#content').hide();
$('#loading').show();
//run the ajax
getPage();
//cancel the anchor tag behaviour
return false;
});
});
function pageload(hash) {
//if hash value exists, run the ajax
if (hash) getPage();
}
function getPage() {
//generate the parameter for the php script
var data = 'page=' + document.location.hash.replace(/^.*#/, '');
$.ajax({
url: "loader.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
//hide the progress bar
$('#loading').hide();
//add the content retrieved from ajax and put it in the #content div
$('#content').html(html);
//display the body with fadeIn transition
$('#content').fadeIn('slow');
}
});
}
</script>
你确定你得到了正确的路径吗?
case 'code' : $page = include($_SERVER['DOCUMENT_ROOT'].DIRECTORY_SEPARATOR.'mysite/code.php'); break;
case 'design' : $page = include($_SERVER['DOCUMENT_ROOT'].DIRECTORY_SEPARATOR.'mysite/design.php'); break;
case 'writing' : $page = include($_SERVER['DOCUMENT_ROOT'].DIRECTORY_SEPARATOR.'mysite/writing.php'); break;
不同环境中的$_SERVER['DOCUMENT_ROOT']可能有尾部斜杠或没有,因此在包含来自$_SERVER['DOCUMENT_ROOT']的文件时要小心
case 'code' : $page = include ($_SERVER['DOCUMENT_ROOT'].DIRECTORY_SEPARATOR.'mysite/code.php'); break;
case 'design' : $page = include ($_SERVER['DOCUMENT_ROOT'].DIRECTORY_SEPARATOR.'mysite/design.php'); break;
case 'writing' : $page = include ($_SERVER['DOCUMENT_ROOT'].DIRECTORY_SEPARATOR.'mysite/writing.php'); break;
include
不返回任何内容,只有true/false表示includes成功/失败。基本上,它很像eval()
,只是使用了外部文件。如果你包含的页面实际上正在生成输出,你必须首先捕获它:
ob_start();
include('somepage.php');
$content = ob_get_clean();
return $content;
或者,如果includes正在生成内容并将其保存到变量中,则:
include('somepage.php');
echo $whatever_var_that_somepage_php_stored_the_content_in;