Question

我正在使用php cart类，并在用户点击添加产品时添加了一些jquery来更新div。

我遇到的问题是，当添加产品时，产品列表会在html页面（屏幕截图）上重复，尽管它不在源代码中。

默认页面：

当添加任何产品时，结果如下：

如您所见，购物车已更新，但会出现一组重复的产品。

这是我正在使用的JQuery：

<script type="text/javascript">
function getItem(id)
{
$.ajax({
 type: "GET",
 url: 'index2.php',
 data: "action=add&id=" + id,
 success: function(data) {
      $('#info').html(data);
 }

 });

 }
 </script>

和带有id信息的div之间的PHP：

<div id="info">
<?php
if(!empty($items)){
    echo '
    <table style="border:2px solid #cc0000;width:400px">
    <tr>
        <td><strong>Item</strong></td>
        <td><strong>Price</strong></td>
        <td><strong>Quantity</strong></td>
        <td><strong>Total</strong></td>
        <td></td>
    </tr>';

    $total = 0;
    foreach($items as $id=>$qty) {
        foreach($products as $product) {
            if($product['id'] == $id)
                break;
        }
        if(!isset($product['name']))
            continue;

        echo '
        <tr>
            <td>' . $product['name'] . '</td>
            <td>$' . $product['price'] . '</td>
            <td>' . $qty . '</td>
            <td>$' . ($product['price'] * $qty) . '</td>
            <td><a href="?action=remove&id=' . $id . '">[x Remove]</a></td>
        </tr>';

        $total += $product['price'] * $qty;
    }

    echo '
    <tr>
        <td><a href="?action=empty">[Empty Cartt]</a></td>
        <td colspan="4" align="right"><strong>Grand Total: $' . $total . '</strong></td>
    </tr>
    </table>';
}
else{
    echo '<p style="color:#990000;">Your shopping cart is empty.</p>';
}
?>
</div>

我不知道造成这种情况的原因。

非常感谢任何解决方案！

Answer 1

看起来你正在渲染整个页面的副本。请注意重复的标题。

解决方案是确保index2.php（或任何端点最好）仅包含信息模板，或者您有意重新呈现整个视图（并且应该设置父容器的html，而不是内在的。）

Answer 2

您每次都使用相同的#info将id div插入另一个div中，尝试使用 replaceWith() 代替您在同一时间只有一个具有相同id的div，例如：

$('#info').replaceWith(data);

希望这有帮助。

JQuery GET检索不需要的HTML

2 个答案: