如何刷新同一頁中的不同div

我正在爲我的網站使用php和mysql數據庫。如何刷新同一頁中的不同div

在我的網站我有four不同的菜單。在每個菜單都有單獨的div，點擊它後必須刷新。

刷新意味着它調用php文件，它具有插入，刪除和顯示數據庫中特定包含的功能。

我的代碼是刷新div刷新的整個頁面狀態。

這裏是我的示例代碼：

我mainpage.php

<div> 
      <ul id="headerMenu" class="menu"> 
     <li rel="menu1"><a href="" >About</a></li> 



    <li rel="menu2"><a href="" class="">Display</a></li> 

    <li rel="menu3"><a href="" class="">Settings</a></li> 
    </ul> 
</div> 

<div id="menu1" class="menu_content"> 
    <div class="right-pane"> 
     <div class="details"> 

<?php include('about.php'); ?> 
    </div> 

    <div id="menu2" class="menu_content"> 
    <div class="right-pane"> 
     <div class="details"> 

<?php include('display.php'); ?> 
    </div> 


    <div id="menu3" class="menu_content"> 
    <div class="right-pane"> 
     <div class="details"> 

    <?php include('Settings.php'); ?> 
    </div>

我Display.php的

<?php 

/* fetched latest data from database is done */ 


/* if i use header it going to main page about div */ 

?>

現在，我想在我的顯示div來顯示數據。

任何人都可以告訴我如何做到這一點？

謝謝。

來源

2014-02-06 user3184286

，如果你想只更新頁面的一部分，你可以使用AJAX。 jQuery爲它提供了一個很好的包裝。 [$ .ajax（）]（http://api.jquery.com/jquery.ajax/） – Ibu

是的，這是達到此目的的最佳方式。 – TCHdvlp

或者你可以使用另一個jQuery ajax wrapper'$（'＃mydiv'）.load（URL）'http://api.jquery.com/load/ –

現在試試這段代碼。

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("button[class='disp']").click(function() { 
     $(".details").load('profile.php'); 
    }); 
}); 
</script> 
</head> 
<body> 
<div> 
    <ul id="headerMenu" class="menu"> 
     <li rel="menu1"><button>About</button></li> 
     <li rel="menu2"><button class="disp">Display</button></li> 
     <li rel="menu3"><button>Settings</button></li> 
    </ul> 
</div> 

    <div id="menu1" class="menu_content"> 

    <div class="right-pane"> 
     <div class="about"> 
      <?php //include('about.php'); ?> 
     </div> 
    </div> 

    <div id="menu2" class="menu_content"> 
     <div class="right-pane"> 
      <div class="details"> 
       <?php include('profile.php'); ?> 
      </div> 
     </div> 
    </div> 


    <div id="menu3" class="menu_content"> 
     <div class="right-pane"> 
      <div class="Settings"> 
       <?php //include('Settings.php'); ?> 
      </div> 
     </div> 
    </div> 

    </div> 
</body> 
</html>

只需添加這樣的profile.php即可。

<?php echo rand(1, 9999); ?>

不要忘記添加JQuery。http://jquery.com/download/

希望它能幫助你。

感謝

來源

2014-02-06 10:26:01

我在我的java腳本中使用了這個。但它不起作用。我的代碼是\t $（「li [class ='menu3'）。click（function（）{ $（」。details「）.load（'myfile.php'）; }）; – user3184286

點擊以再次顯示它的菜單它正在加載並進入關於菜單這裏有什麼問題 – user3184286

我認爲你保持相同的類名稱和顯示菜單，所以改變關於菜單的類名 –

你可以用ajax輕鬆做到這一點。

一個DIV

例子：

<html> 
    <body> 

    <script type="text/javascript"> 
    function Ajax(){ 
    var xmlHttp; 
     try{  
      xmlHttp=new XMLHttpRequest();// For Firefox, Opera 8.0+, Safari and Chrome 
     } 
     catch (e){ 
      try{ 
       xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // For Internet Explorer 
      } 
      catch (e){ 
       try{ 
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
       } 
       catch (e){ 
        alert("No AJAX!!!"); 
        return false; 
       } 
      } 
     } 

    xmlHttp.onreadystatechange=function(){ 
     if(xmlHttp.readyState==4){ 
      document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText; 
      setTimeout('Ajax()',10000); 
     } 
    } 
    xmlHttp.open("GET","http://www.examplepage.com/the_page_that_contains_the_div_content",true); 
    xmlHttp.send(null); 
    } 

    window.onload=function(){ 
     setTimeout('Ajax()',10000); 
    } 
    </script> 

    <div id="ReloadThis">Default text</div> 

    </body> 
    </html>

來源

2014-02-06 10:17:53 SavinienL

由於它使用jQuery進行標記，因此使用它會更簡潔 –

謝謝。但我沒有得到如何動態調用xmlHttp.open，因爲我有3個PHP文件。 – user3184286

-1

什麼LBU說。

使用$ .ajax來調用一個php程序，它將返回你想要的數據。在這個例子中，拿在VAR ajax_data

在Ajax調用的.success事件，東東內容到正確的div像這樣：

<!-- html definition of display div --> 
<div id="displaystuff"></div> 

... 
// script: 
$('#displaystuf').html(ajax_data)

來源

2014-02-06 10:19:20

-1

PHP是在服務器端，所以它只能生成「pages」，..如果你想修改一個「頁面」的內容而不刷新頁面本身，你必須使用javascript來發出ajax請求。所以你可以在你想要的HTMLElement中插入一個php響應。

這是easyer與jQuery。 http://api.jquery.com/jquery.ajax/

來源

2014-02-06 10:19:23 jona303

把所有的功能在PHP一起JSON格式json_encode(outputdatafromphp);打印獲取價值從你的Ajax功能的JavaScript，使您的菜單div標籤作爲成功的功能

$.ajax({ 
url:url, 
type:'post', 
dataType:'json', 
success:function(out){ 
$('#menu1').click(out,function(){ 
    $.each(out,function(ie,value){ 
     alert(value.data); 
} 

} 
$('#menu2').click(out,function(){ 
} 
});

內點擊

來源

2014-02-06 10:24:17 kamesh

嘗試

$('.menu_content').on('click',function(e){ 
    e.stopPropagation(); 
    var $menu_to_load=$(this).children('.right-pane .details') 
    $menu_to_load.load($menu_to_load.attr('id')); 
}); 
/*make sure your div with class "detail" have id of the page you want to call for them */

來源

2014-02-06 11:10:25

如何刷新同一頁中的不同div

回答

相關問題