如何更改div的內容使用jQuery不同的PHP文件 - 使用超鏈接 - 不刷新頁面

中

如何更改div的內容使用jQuery不同的PHP文件 - 使用超鏈接 - 不刷新頁面如何更改div的內容使用jQuery不同的PHP文件 - 使用超鏈接 - 不刷新頁面

中可以說我有statsdiv

的ID的DIV然後可以說我有以下頁面：

page1.php中使page2.php page3.php

和3個環節。

page1 |第2頁|第3頁

當第一次打開文檔時，我需要它預先加載page1，然後我需要能夠在頁面的1 div內更改爲page1，page2或page3，而無需刷新頁面。

我也需要該div每5秒刷新一次。

我該如何做到這一點？

來源

2012-07-19 user910632

Ajax，輪詢和DOM操作。 – 2012-07-19 16:49:53

您可以使用iframe，這是可以在沒有太多工作的情況下加載完整頁面的框。

但是，我會建議你使用AJAX。每次人點擊你的鏈接，你創建一個JavaScript函數與jQuery將做

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

如果我沒有記錯，這不應該重新加載整個頁面，但只有你的div。請讓我知道如果我錯了，因爲我現在無法嘗試我的代碼。

來源

2012-07-19 16:56:55 Maude

試試這個，我認爲你的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-19 17:03:54

謝謝，這個伎倆！ – user910632 2012-07-19 18:35:03

如何更改div的內容使用jQuery不同的PHP文件 - 使用超鏈接 - 不刷新頁面

回答

相關問題