如何使用一个jquery ajax调用来更新页面上的多个区域？

Question

我目前正在使用jQuery，Ajax和PHP实现购物车，并且大部分工作正在进行。然而，我目前卡在如何更新购物车页面内容时，我更新购物车，因为此刻我返回的HTML更新侧栏中的购物车区域（工作正常）。

所以我的问题是如何更新表格，同时在网站的主要内容区域显示所有的购物车项目？

我的jQuery（用于更新车）：

$('.update_cart').submit(function (e) { 
    e.preventDefault(); 

    $.ajax({ 
     cache: false, 
     url: 'inc/shopping_bag.php', 
     data: $(this).serialize() + '&action=update', 
     type: 'POST', 
     success: function(html) { 
      $('#shopping-bag p').html(html); 
     } 
    }); 
}); 

我的PHP更新：

elseif (!empty($action) && $action == 'update') { 

if (is_array($_POST['item_qty'])) { 
    foreach ($_POST['item_qty'] as $key=>$quantity) { 
     $quantity=ceil($quantity); 
     if ($quantity==0) { 
      unset($_SESSION['basket'][$key]); 
     } else { 
      $_SESSION['basket'][$key]['item_qty']=$quantity; 
     } 
    } 
} 

update_basket(); 
} 
function update_basket() { 
foreach ($_SESSION['basket'] as $array) 
{ 
    $totalItems+=$array['item_qty']; 

    $cost=$array['item_qty']*$array['unit_price']; 
    $total+=$cost; 
} 
echo 'Shopping Bag<br>'.$totalItems.' Items<br />&pound;'.sprintf("%01.2f", $total); 
} 

我的购物车页面（对不起有点长）：

<div id="content"> 
    <section> 
     <div class="content-seperator"> 
      <h1>Shopping Bag</h1> 
       </div> 
       <div id="inner-content"> 
        <section> 
         <?php if (count($_SESSION['basket']) > 0) { ?> 
          <form action="#" class="update_cart"> 
           <table id="cart"> 
            <thead> 
             <tr> 
              <th width="60">Quantity</th> 
              <th>Item</th> 
              <th width="70">Unit Price</th> 
              <th width="60">Total</th> 
              <th class="blank" width="90">&nbsp;</th> 
             </tr> 
            </thead> 
            <tbody> 
             <?php 

              $total=0; 
              $count=0; 

              foreach ($_SESSION['basket'] as $array) 
              { 

               $check_id = substr($array['item_id'], 0, 5); 

               $cost=sprintf("%01.2f", $array['item_qty']*$array['unit_price']); 
               $total+=$cost; 

               if (!empty($array['image'])) { 
                if (file_exists($array['image'])) { 
                 $image_path = $array['image']; 
                } else { 
                 $image_path = '<img src="images/missing.gif" alt="missing image" />'; 
                } 
               } else { 
                $image_path = '<img src="images/missing.gif" alt="missing image" />'; 
               } 
               $image = getImagesize($image_path); 
               $dimensions = imgResize($image[0], $image[1], 80); 

               if ($check_id=='parts') { 
               ?> 
               <tr> 
                <td class="align-centre"> 
                 <input name="item_qty[<?php echo $count; ?>]" type="text" size="1" value="<?php echo $array['item_qty']; ?>" class="formfield align-centre" /> 
                 <input name="unit_price[<?php echo $count; ?>]" type="hidden" value="<?php echo $array['unit_price']; ?>" /> 
                </td> 
                <td> 
                <span class="basket_img"><img src="<?php echo $image_path; ?>" <?php echo $dimensions; ?> alt="Diesel Injector Image" /></span> 
                <strong><?php echo $array['category']; ?> Injector</strong><br /> 
                <span class="basketlabel">Part No:</span> <strong><?php echo $array['item_name']; ?></strong> 
                </td> 
                <td>&pound;<?php echo str_replace("£ ","",$array['unit_price']); ?></td> 
                <td><strong>&pound;<?php echo $cost; ?></strong></td> 
                <td><a href="?removeItem=<?php echo $array['item_id']; ?>" class="basket_remove">Remove Item</a></td> 
               </tr> 
              <?php 
               } if ($check_id=='prods') { ?> 
               <tr> 
                <td class="align-centre"> 
                <input name="item_qty[<?php echo $count; ?>]" type="text" size="1" value="<?php echo $array['item_qty']; ?>" class="formfield align-centre" /> 
                <input name="unit_price[<?php echo $count; ?>]" type="hidden" value="<?php echo $array['unit_price']; ?>" /> 
                </td> 
                <td> 
                <span class="basket_img"><img src="<?php echo $image_path; ?>" <?php echo $dimensions; ?> alt="Diesel Product Image" /></span> 
                <strong><?php echo $array['category']; ?></strong><br /> 
                 Product Code: <strong><?php echo $array['item_name']; ?></strong> 
                </td> 
                <td>&pound;<?php echo sprintf("%01.2f", $array['unit_price']); ?></td> 
                <td><strong>&pound;<?php echo $cost; ?></strong></td> 
                <td><a href="?removeItem=<?php echo $array['item_id']; ?>" class="basket_remove">Remove Item</a></td> 
               </tr> 
               <?php } 
                $count++; 
               } ?> 
              </tbody> 
             </table> 
             <input type="submit" name="update_cart" value="Update Shopping Bag" class="rounded-buttons" /> 
             <input type="button" name="empty_cart" value="Empty Shopping Bag" class="rounded-buttons" /> 
           </form>  
          <?php } else { ?> 
           <p class="no_items">You have no items in your shopping bag</p> 
          <?php } ?> 
        </section> 
       </div> 

任何帮助非常感谢，谢谢。

Answer 1

只需更新success功能：

success: function(html) { 
    $('#shopping-bag p').html(html); 
    // update/add to your table here 
    $updatehere = $('#tableid #idortd'); 
    $updatehere.text(parseInt($updatehere.text())++); 
} 

以上是在'一个递增值的一个例子。你可以用添加一行代替这个

Answer 2

现在好了，我终于找到了如何重新加载包含购物车表格的div - 我已经把inner-content div中的所有内容放入一个单独的文件中，包含它通常和使用

$("#inner-content").load(location.href + " #inner-content>*", ""); 

要重新加载更新。