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

【问题标题】：How can I update more than one area on a page with one jquery ajax call?如何使用一个 jquery ajax 调用更新页面上的多个区域？
【发布时间】：2012-03-10 09:56:15
【问题描述】：

我目前正在使用 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>

非常感谢您的帮助，谢谢。

【问题讨论】：

您到底想在表格中做什么？隐藏该行或将其标记为已添加？提供更多细节
对不起，你是对的，我应该更具体一些。我想要做的是更新表格中每个产品的数量和价格，如果数量发生变化并单击“更新包”，或者如果项目被删除，则从表中删除该行。我的问题不是这样做，而是如何做到这一点以及更新侧边栏中的购物车 div。
使用 JSON 作为响应而不是 HTML。所以你会有类似的东西：response = [{ product: 'a', price: 1 },{ product: 'b', price: 2 },...]，所以你可以重复使用它。

标签： jquery ajax

【解决方案1】：

只需更新您的success 函数：

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

上面是一个将 ` 中的值加一的示例。你可以用添加一行来替换它

【讨论】：

【解决方案2】：

现在好了，我终于找到了如何重新加载保存购物车表的 div - 我已将内部内容 div 中的所有内容放入一个单独的文件中，正常包含并使用

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

更新时重新加载。

【讨论】：