最近几天,我在网上四处寻找一个脚本,该脚本将具有我想要的元素。。最好的thusfar是这个http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp,但有很多问题,我需要更好的解决方案:
-
我不想要标签:我想要加载文件夹(www.site.com/first/site/)等页面的所有链接。这在github上很有效(点击此处https://github.com/spjoe/deluge-yarss-plugin,然后点击一个随机文件并在观看地址栏时返回)。如果有人知道他们在做什么或如何做,那将是非常酷的。
-
我需要动态内容:上面的脚本只从switch函数加载"case",而我需要php检查url并在mysql数据库中找到一个文件,并根据url从所需的表中回显内容,如果它是在数据库中找到的(如果我指向site.com/harvey的链接,php应该在数据库中发现harvey,并显示例如他的手机、地址和其他详细信息,而这不能预先加载,而是由于带宽问题,只能在点击时请求)。
-
历史:我想有一个选项,在这个选项中,网站上的前后移动将完美地工作,并且在点击链接时使用动画。。
-
可更改div中的工作链接:因为有些脚本存在问题,无法更改链接所在的内容(例如,第一个内容框中包含导航,应该在第二个框中用不同的导航替换),所以这在github中也能很好地工作。。
我希望你能给我一些链接,甚至更多的代码帮助。。
我认为您正在寻找的脚本是pjax,它完全具有您想要的所有功能。你可以在github上找到它:https://github.com/defunkt/jquery-pjax/tree/heroku
编辑
您可以将它与任何您喜欢的服务器端语言一起使用。例如,
<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
$('nav a').pjax('#content')
})
</script>
在你的网站的头部,
<nav>
<a href="otherContent1.php" >click me for other content</a>
<a href="otherContent2.php" >click me for even more additional content</a>
</nav>
<section id="content">
<h1>Original Content</h2>
<p>
this will be replaced by pjax with the content's of <a href="otherContent1.php">otherContent1.php</a> or <a href="otherContent2.php">otherContent2.php</a>
</p>
</section>
在您的主模板中,并修改您的php代码,以便它查找HTTP_X_PJAX
标头。如果它存在(请参见xhr.setRequestHeader('X-PJAX', 'true')
),则只渲染应该替换<section id="content">
内容的部分,否则渲染整个页面。Pjax足够智能,如果它工作,它将只替换<section id="content">
的内容,如果它不工作,您仍然可以使用常规链接。pjax甚至会负责谷歌分析,如果你正在使用它,所以你的跟踪仍然有效。
EDIT2:示例
好的,这里有一个示例php页面。请注意,我做了而不是测试,我只是在堆栈溢出上快速而肮脏地写了它,以展示如何解决这个问题。此代码未经测试,当然也未做好生产准备。但是作为一个例子,您可以这样做(文件应该命名为index.php):
<?php
$render_template=true;
if ($_SERVER["HTTP_X_PJAX"])
{
$render_template=false;
}
?>
<?php
if ($render_template) {
?>
<html>
<head>
<meta charset="utf-8" />
<title>Testing Pjax</title>
<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
$('nav a').pjax('#content')
})
</script>
</head>
<body>
Date in template: <?php echo $today = date("D M j G:i:s T Y"); ?>
<nav>
<a href="index.php?content=1" >click me for other content</a>
<a href="index.php?content=2" >click me for even more additional content</a>
</nav>
<section id="content">
<?php
}
?>
<?php
if ($_Get["content"]==1)
{
?>
<h1>Content=1</h1>
Date in content: <?php echo $today = date("D M j G:i:s T Y"); ?>
<p>
this will be replaced by pjax with the content's of <a href="index.php?content=1">index.php?content=1</a> or <a href="index.php?content=2">index.php?content=2</a>
</p>
<?php
} else {
?>
<h1>Content 2=2</h1>
Date in content: <?php echo $today = date("D M j G:i:s T Y"); ?>
<p>
this will be replaced by pjax with the content's of <a href="index.php?content=1">index.php?content=1</a> or <a href="index.php?content=2">index.php?content=2</a>
</p>
<?php
}
?>
<?php
if ($render_template) {
?>
</section>
</body>
</html>
<?php
}
?>
如果您希望URL在ajax页面请求时显示"正确"URL,您可以使用PJAX,它会使用pushState
更改历史记录,但在ie6-ie9上不起作用,请查看CanIUse:历史记录以了解兼容性问题。