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

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 "find"。也许你忘记了一个点？应该是 $(this).find(".deleteProduct").... 如果你这样做记得实际添加类。

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

 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);

                }
            });

您应该将计算总计的部分添加到成功回调函数中，但在此之前，您应该使用 $("....").remove(); 之类的内容删除表格行

使用正确的代码进行编辑： 首先，将 jquery 删除按钮侦听器从您的删除功能中取出，并使其如下所示：

<script>
     $('.mydeletebtn').click(function(event) {
    deleteProduct($(this).data("rowid"));
    });
    function deleteProduct(id) {
     .....
    }

然后修改删除行的 HTML 输出，如下所示：

'<td>' +  " <Button type='button' class='mydeletebtn btn btn-primary' data-rowid="'+id+'" >Delete</Button> " + '</td>' +

因为您在使用 jquery 时并不真正需要 onclick。我对其进行了修改，以便您的 rowid 作为 javascript 数据属性传递。

在所有这些之后，您需要像这样实际处理行删除 + 总更新：

    var $parentRow = $(this).closest("tr");
                $.ajax({
                    type: 'POST',
                    url: 'remove.php',
                    dataType: 'JSON',
                    data: {id: id},
                    success: function (data) {
                        $parentRow.delete();
                        updateTotals();
                    },
                    error: function (xhr, status, error) {
                        alert(xhr.responseText);

                    }
                });

你最终的 JS 应该是这样的：

<script>
function updateTotals(){
var total = 0;
    $('.amount').each(function(e){
        total -= Number($(this).val());
    });
$('#total-amount').text(total);
}
$('.mydeletebtn').click(function(event) {
        deleteProduct($(this).data("rowid"),$(this));
        });
function deleteProduct(rowid,$row) {
         var $parentRow = $(this).closest("tr");
                    $.ajax({
                        type: 'POST',
                        url: 'remove.php',
                        dataType: 'JSON',
                        data: {id: rowid},
                        success: function (data) {
                            $parentRow.delete();
                            updateTotals();
                        },
                        error: function (xhr, status, error) {
                            alert(xhr.responseText);

                        }
                    });
        }

</script