Question

我正在为我的最后一年的项目创建一个电子商务网站。我遇到了删除产品的问题。如果我删除产品，则产品已从数据库中成功删除。但是最终总数并没有减少我到目前为止在下面附加的截图以及下面的屏幕截图。

表

 <div class="container">
                <table class="table table-striped" id="mytable">
                    <thead>
                    <tr>
                        <th>ProductID</th>
                        <th>Productname</th>
                        <th>Price</th>
                        <th>Qty</th>
                        <th>Amount</th>
                        <th>Delete</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>

        </div>

        <div style='text-align: right; margin:10px'>
            <label><h3>Total amount: </h3></label>
            <span style="font-size: 40px; color: #ff0911" id='total-amount'></span>
        </div>

显示产品

<script> 
getProducts();
function getProducts() {
    $.ajax({
        type: 'GET',
        url: 'all_cart.php',
        dataType: 'JSON',
        success: function(data) {
            data.forEach(function(element) {
                var id = element.id;
                var product_name = element.product_name;
                var price = element.price;
                $('#mytable tbody').after
                (
                    '<tr> ' +
                    '<td>' + id + '</td>' +
                    '<td>' + product_name + '</td>' +
                    '<td>' + price + '</td>' +
                    "<input type='hidden' class='price' name='price' value='" + price + "'>" +
                    '<td>' + "<input type = 'text' class='qty' name='qty' value='1'/>" + '</td>' +
                    '<td>' + "<input type = 'text' class='amount' id='amount' disabled/>" + '</td>' +

                    '<td>' +  " <Button type='button' class='btn btn-primary' onclick='deleteProduct(" + id + ")' >Delete</Button> " + '</td>' +
                    '</tr>');
            });
        },
        error: function(xhr, status, error) {
            alert(xhr.responseText);
        }
    });
}

删除产品功能

function deleteProduct(id) {
    $(this).find('deleteProduct').click(function(event) {
        deleteProduct($(event.currentTarget).parent('tr'));
    });
    var total = 0;
    $('.amount').each(function(e){
        total -= Number($(this).val());
    });
    $('#total-amount').text(total);
                $.ajax({
                    type: 'POST',
                    url: 'remove.php',
                    dataType: 'JSON',
                    data: {id: id},
                    success: function (data) {
                    },
                    error: function (xhr, status, error) {
                        alert(xhr.responseText);

                    }
                });
}
</script>

remove.php

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    include "db.php";
    $conn = new mysqli($servername, $username, $password, $dbname);
    $stmt = $conn->prepare("delete from cart where id=?");
    $stmt->bind_param("s", $id);
    $id = $_POST["id"];
    if ($stmt->execute())
        {
            echo 1;
        }
    else 
        {
                echo 0;
        }
        $stmt->close();
        }
?>

Answer 1

我认为您的问题与js有关，而与php有关。由于remove.php文件看起来不错，所以您可能遇到了AJAX问题。

function deleteProduct(id) {
$(this).find('deleteProduct').click(function(event) {
    deleteProduct($(event.currentTarget).parent('tr'));
});

由于您在非类上使用“查找” jQuery，这看起来已经很奇怪了。也许你忘了一个点？应该是$（this）.find（“。deleteProduct”）...。如果这样，请记住实际添加该类。

此外，当您通过Ajax删除产品时，您永远不会刷新表，因此产品行仍然存在。计算总数时，您正在获取当前表元素：

 var total = 0;
$('.amount').each(function(e){
    total -= Number($(this).val());
});

如果您不删除要在其上按Delete键的行，则会导致错误的值。

$('#total-amount').text(total);
            $.ajax({
                type: 'POST',
                url: 'remove.php',
                dataType: 'JSON',
                data: {id: id},
                success: function (data) {
                },
                error: function (xhr, status, error) {
                    alert(xhr.responseText);

                }
            });

您应该在成功回调函数中添加用于计算总计的部分，但是在此之前，您应该删除带有$（“ ....”）。remove（）;之类的表行。

使用php ajax删除产品最终总数并没有减少

1 个答案: