如何通過ajax更新一個區域中的數據？

Question

我想上傳四個鏈接的一個區域中的數據，當我點擊鏈接1時，它會加載特定區域中的數據，當我點擊鏈接2時，它會將頁面加載到第一個鏈接打開的同一區域，我怎樣才能做到這一點？

<div class="container"> 
    <div class="span-5"> 
     <ul> 
      <li><?php echo $this->Manager->link('Ecommerce',array('controller'=>'associations','action'=>"view_report"),array('id'=> 'home','class'=>'nav'));?></li> 
      <li><a href="#" id="home" class="nav">Home</a></li> 
      <li><a href="#" id="about" class="nav">About</a></li> 
      <li><a href="#" id="contact" class="nav">Contact Us</a></li> 
     </ul> 
    </div> 
</div> 

，我想從電子商務的鏈接打開數據爲int這樣

<?php v_start($this);?> 

<h1><?php echo __l('View Report');?></h1> 

<div class="firsttable"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="2"> 
     <thead> 
      <tr class="heading"> 
      <td><?php echo __l('Financials');?></td> 
      <td><?php echo __l('Payment Methods');?></td> 
      <td><?php echo __l('By Credit Card');?></td> 
      </tr> 
     </thead> 
     <tbody> 

      <tr> 
      <td> 
       <?php 
        echo __l("YTD \t "); 
        $ytd_total=0; 
        foreach ($YTD as $yearData) 
        { 

         $ytd_total +=$yearData['AssocPaymentDetail']['membership_fee'] - $yearData['AssociationDiscount']['amount']; 

        } 
        echo $ytd_total."<br />"; 

       ?> 
       <?php 

       echo __l("Last 5days "); 
       $fda_total= 0; 
       foreach ($fiveDays as $fiveDaysData) 
        { 

         $fda_total += $fiveDaysData['AssocPaymentDetail']['membership_fee'] - $fiveDaysData['AssociationDiscount']['amount']; 

        } 
        echo $fda_total ."<br />"; 
       ?> 
      </td> 
      <td><?php echo __l('creditcard');?> <?php echo __l($ccSum) ?> </td> 
      <td> 
       <?php 
     //  debug($paymentRecord); 
     //  debug($ccIndex); 
        foreach($paymentRecord as $data =>$key){ 
         foreach($ccIndex as $index){ 
          if($data== $index) 
          { 
           echo "$data \t\t\t"; 
           if(is_array($key)) 
            echo array_sum($key); 
           else 
            echo "\t\t $key"; 


          } 

          echo "<br/>"; 
         } 

        } 

       ?> 
      </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

請幫我做這件事，感謝newfile.ctp提前

Answer 1

在放在href屬性中的鏈接，然後通過jquery處理它們像這樣的東西

$('a.nav').click(function(e){ 
e.preventDefault(); 
$.get($(this).attr('href'), function(data){ 
    $cont = $('[CONTAINERS SELECTOR]'); 
    $cont.html(data); 
}) 
}) 

EDIT-AFTER COMMENT

改變你的HTML這樣的事情

<div class="container"> 
<div class="innerCont"></div> 
    <div class="span-5"> 
     <ul> 
      <li><?php echo $this->Manager->link('Ecommerce',array('controller'=>'associations','action'=>"view_report"),array('id'=> 'home','class'=>'nav'));?></li> 
      <li><a href="#" id="home" class="nav">Home</a></li> 
      <li><a href="#" id="about" class="nav">About</a></li> 
      <li><a href="#" id="contact" class="nav">Contact Us</a></li> 
     </ul> 
    </div> 

，並把內容選擇到div.innerCont

$cont = $('div.innerCont'); 

Answer 2

你不要在你的HTML specifie區，在這裏，我」我們假設它會在你的ul節點之後

$uls = $("ul.span5"); // select all page ul.span5 
$uls.each(function(){ // for all ul.span5 node 
    $ul = $(this); // current ul to work 
    $region = $("<div/>").insertAfter($ul); // dynamic create and insert the region, as a div 
    $links = $ul.find("a.nav"); // select all sub links 
    $links.click(function(e){ // click on links 
     $a = $(this); // current link 
     var href = $a.attr("href"); // i assume you work on the href 
     $region.load("myajax.php",{href:href},function(data){ // do ajax and load it in the common region 
      // here load is done, do next step here 
     }); 
     e.preventDefault(); // no real click please 
    }); 
}); 

Answer 3

您可以將單個請求處理程序的各個環節與nav作爲類名，然後輸出恢復到一個容器

$(".nav").on('click', function() { 
    $("#loadingdiv").load("linktoload.php"); // or other 

}); 

Answer 4

嗯，我已經做到了這一點，而無需使用任何額外的jQuery

<div class="container"> 
<div class="span-5"> 
    <ul> 
     <li><?php echo $this->Manager->link('Ecommerce',array('controller'=>'associations','action'=>"view_report"),array('update'=> '#testDiv'));?>li> 
     <li><a href="#" id="home" class="nav">Home</a></li> 
     <li><a href="#" id="about" class="nav">About</a></li> 
     <li><a href="#" id="contact" class="nav">Contact Us</a></li> 
    </ul> 
    </div> 
    </div> 
<div id = 'testdiv'></div> 

的蛋糕會通過itselp使用蛋糕的屬性更新來更新該地區。非常感謝回答這個問題的人，無論回答是對還是錯。感謝所有