加载动态php&;mysql页面不刷新-AJAX


Loading dynamic php&mysql pages without refreshing - AJAX

最近几天,我在网上四处寻找一个脚本,该脚本将具有我想要的元素。。最好的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:历史记录以了解兼容性问题。