如何通过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使用蛋糕的属性更新来更新该地区。非常感谢回答这个问题的人，无论回答是对还是错。感谢所有