Question

数据已删除数据库，但表行未删除，总数未减少php ajax 我正在为我的最后一年的项目创建一个电子商务站点。我遇到删除产品的问题。如果我删除产品已成功从数据库中删除。但是最终总数并没有减少，表格行也没有删除我到目前为止尝试的内容（下面附有屏幕截图）。

表格

<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(this," + id + ")' >Delete</Button> " + '</td>' +
                    '</tr>');
            });
        },
        error: function(xhr, status, error) {
            alert(xhr.responseText);
        }
    });
}

计算总数

$(function() {
    $(".price, .qty").on("keydown keyup click", function () {
        var price = $(this).parents('tr').find('.price');
        var qty= $(this).parents('tr').find('.qty');
        var sum = (
        Number($(price).val()) * Number($(qty).val())
        );
        $(this).parents('tr').find('.amount').val(sum);
        calculateAmount();
    });
});

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

删除产品功能

function deleteProduct(event, id) {
                $.ajax({
                    type: 'POST',
                    url: 'remove.php',
                    dataType: 'JSON',
                    data: {id: id},
                    success: function (data) {
                        $(event).parent('tr').remove();
                        calculateAmount();
                    },
                    error: function (xhr, status, error) {
                        alert(xhr.responseText);

                    }
                });
}

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

如果删除后从表中删除数据，请尝试使用此代码

1。成功返回后，删除功能再次运行getProducts()功能数据再次在表中获取并重置

2.delete功能使用php返回成功功能中的所有数据，转到remove.php并选择所有数据查询并返回所有数据

function deleteProduct(event, id) {
            $.ajax({
                type: 'POST',
                url: 'remove.php',
                dataType: 'JSON',
                data: {id: id},
                success: function (data) {
                     getProducts();
                    $(event).parent('tr').remove();
                    calculateAmount();
                },
                error: function (xhr, status, error) {
                    alert(xhr.responseText);

                }
            });

Answer 2

您可以使用以下逻辑：

在展示产品时（修改该行，只需将动态ID分配给tr标签）-

....
'<tr id=tr_'+id+'> ' +
....

＆删除产品功能（使用ID删除相关tr）-

....
$('#tr_'+id).remove();
....

在您的代码中...

Diplay产品功能-

<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 id=tr_'+id+'> ' +
                    '<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(this," + id + ")' >Delete</Button> " + '</td>' +
                    '</tr>');
            });
        },
        error: function(xhr, status, error) {
            alert(xhr.responseText);
        }
    });

＆删除功能-

function deleteProduct(event, id) {
                $.ajax({
                    type: 'POST',
                    url: 'remove.php',
                    dataType: 'JSON',
                    data: {id: id},
                    success: function (data) {
                        //$(event).parent('tr').remove();
                        $('#tr_'+id).remove();
                        calculateAmount();
                    },
                    error: function (xhr, status, error) {
                        alert(xhr.responseText);

                    }
                });
}

我只是在解释逻辑..但是您需要详细调整其余的麻烦..：）

数据已从数据库中删除，但未删除表行，并且未使用Ajax在php中减少总记录

2 个答案: