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 - 我已将内部内容div中的所有内容放入一个单独的文件中，正常包含并使用

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

重新加载更新。

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

2 个答案: