0

如何使用 jQuery 将 Div 的内容更改为不同的 PHP 文件 - 使用超链接 - 不刷新页面

假设我有一个 id 为 statsdiv 的 div

然后假设我有这些页面：

page1.php page2.php page3.php

和3个链接。

第 1 页 | 第 2 页 | 第3页

我需要它在第一次打开文档时预加载 page1，然后我需要能够在页面的 1 div 内更改为 page1、page2 或 page3 而无需刷新页面。

我还需要该 div 每 5 秒刷新一次。

我怎样才能做到这一点？

4

2 回答 2

1

您可以使用 iframe，这些框可以在其中加载完整页面而无需太多工作。

但是，我建议您使用 AJAX。每次该人单击您的链接时，您都会使用 jquery 创建一个 javascript 函数

$('#statsdiv').load('page1.html');

如果我没记错的话，这不应该重新加载整个页面，而只是你的 div。如果我错了，请告诉我，因为我现在无法尝试我的代码。

于 2012-07-19T16:56:55.167 回答
0

试试这个，我认为你的 div 有一个统计 id (#stats)，并且页面有 page1.php、page2.php 和 page3.php 之类的链接。最初它将加载 page1.php，稍后 onclick 事件将更改页面。

<!DOCTYPE html>
 <html lang="en">
 <head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){

        // for initial load
        pageUrl = 'page1.php';
        // after clicking links
        $('#page2').click(function(){
            pageUrl = 'page2.php';
            LoadingPages(pageUrl);
        })

        $('#page3').click(function(){
            pageUrl = 'page3.php';
            LoadingPages(pageUrl);
        })

        $('#page1').click(function(){
            pageUrl = 'page1.php';
            LoadingPages(pageUrl);
        })

        function LoadingPages(pageUrl)
        {
            $('#stats').load(pageUrl);
        }
        int = setInterval(function(){
            LoadingPages(pageUrl)
        },5000);

    })
</script>
  </head>
  <body>
<div id="stats"></div>

<a href="#" id="page1"> Page 1</a>
<a href="#" id="page2"> Page 2</a>
<a href="#" id="page3"> Page 3</a>

  </body>
  </html>
于 2012-07-19T17:03:54.947 回答