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

Question

How Do I Change Div's Content With jQuery To Different PHP Files - Using Hyperlinks - No Refresh Of Page 如何使用jQuery将Div的内容更改为不同的PHP文件-使用超链接-页面不刷新

Lets say I have a div with the id of statsdiv 可以说我有一个div，其ID为statsdiv

Then Lets say I have These Pages: 然后说我有这些页面：

page1.php page2.php page3.php page1.php page2.php page3.php

And 3 links. 和3个链接。

page1 | 第1页| page2 | 第2页| page3 第3页

I need it to preload page1 when the document is first opened, then I need to be able to change to page1, page2, or page3 within 1 div of the page without the page refreshing. 我需要它在第一次打开文档时预加载page1，然后我需要能够在页面的1 div内更改为page1，page2或page3，而无需刷新页面。

I also need that div to refresh every 5 seconds. 我还需要该div每5秒刷新一次。

How can I accomplish this? 我该怎么做？

Answer 1

You can use iframe, which are boxes in which you can load complete pages without so much work. 您可以使用iframe，这是无需过多工作即可加载完整页面的盒子。

However, i would recommand you to use AJAX. 但是，我建议您使用AJAX。 Everytime the person click on your links, you create a javascript function with jquery that will do 每当有人点击您的链接时，您都会使用jquery创建一个javascript函数，该函数将

$('#statsdiv').load('page1.html'); $（'＃statsdiv'）。load（'page1.html'）;

If i remember correctly this shouldn't reload the whole page, but only your div. 如果我没记错的话，这不应该重新加载整个页面，而只能重新加载div。 Please let me know if i am wrong, as i cannot try my code right now. 如果我错了，请告诉我，因为我现在无法尝试使用我的代码。

Answer 2

Try this , i consider that your div has an id of stats (#stats), and pages have links like page1.php, page2.php and page3.php. 试试这个，我认为您的div的ID为统计信息（#stats），并且页面具有诸如page1.php，page2.php和page3.php之类的链接。 Initially it will load page1.php and later onclick events will change the pages. 最初它将加载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>

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

问题描述

2 个解决方案

解决方案1
1 2012-07-19 16:56:55

解决方案2
0 2012-07-19 17:03:54

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

问题描述

2 个解决方案

解决方案1 1 2012-07-19 16:56:55

解决方案2 0 2012-07-19 17:03:54

解决方案1
1 2012-07-19 16:56:55

解决方案2
0 2012-07-19 17:03:54