动态添加商品行后如何通过AJAX+PHP+MySQL实现变动时实时总价求和

问题根源 #

你现有代码的核心问题如下：

• 没有使用事件委托绑定事件，动态新增的商品行的输入、选择操作无法触发计算逻辑
• 仅读取了第一个商品的ID和数量，没有遍历所有已生成的商品行汇总数据
• 后端仅支持单商品价格计算，没有批量计算多商品总价的逻辑
• 没有监听商品选择框的变更事件，切换商品时不会触发总价更新

修复步骤 #

1. 修改动态生成代码，增加统一类名 #

给动态生成的商品选择框、数量输入框增加统一类名，方便后续批量选择元素，同时给商品行容器也加统一类名：

let counter = 1;
$("#add-button").click(function () {    
    event.preventDefault(); 
    counter++;
    let newSubjectField =  `<div class="row product-row" id="products${counter}">
                                <div class="col-xl-6 col-md-6 col-12 mb-1">
                                    <div class="form-group">
                                        <label for="product_id${counter}">Product</label>
                                        <!-- 新增统一类名 product-select -->
                                        <select class="form-control product-select" name="product_id[]" id="product_id${counter}">
                                            <option value="">Pilih</option>
                                            <?php
                                                $sql = mysqli_query($con, "SELECT * FROM product ORDER BY id ASC");
                                                while($data = mysqli_fetch_array($sql)){
                                            ?>
                                            <option value="<?php echo $data['id']; ?>"><?php echo $data['name']; ?></option>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-md-6 col-12 mb-1">
                                    <div class="form-group">
                                        <label for="total_product${counter}">Total Product</label>
                                        <!-- 新增统一类名 total-product -->
                                        <input type="number" class="form-control total-product total_product${counter}" name="total_product[]" id="total_product${counter}" placeholder="Jumlah" />
                                    </div>
                                </div>
                            </div>`;
    $('#form-products').append(newSubjectField);
});

记得同步给静态的第一个商品行的选择框加product-select类、数量输入框加total-product类、行容器加product-row类。

2. 替换前端总价计算逻辑 #

使用事件委托绑定事件，遍历所有商品行汇总数据提交给后端：

// 事件委托到固定父元素，兼容动态新增的元素
$('#form-products').on('keyup', '.total-product', calcTotal)
                   .on('change', '.product-select', calcTotal);

function calcTotal() {
    let productList = [];
    // 遍历所有商品行
    $('.product-row').each(function() {
        let pid = $(this).find('.product-select').val();
        let num = $(this).find('.total-product').val();
        // 仅收集已选商品、已填有效数量的行数据
        if(pid && num && parseInt(num) > 0) {
            productList.push({
                id: pid,
                num: num
            });
        }
    });
    $.ajax({
        type: 'post',
        url: 'ajax-total.php',
        data: {
            products: JSON.stringify(productList)
        },
        success: function(data){
            let obj = JSON.parse(data);
            $('#total').val(obj.total);        
        }
    });
}

3. 修改后端逻辑，支持多商品总价计算 #

<?php
include '../connection.php';
// 防SQL注入，使用预处理语句
$productList = json_decode($_POST['products'], true);
$total = 0;
if(!empty($productList)) {
    foreach($productList as $item) {
        $pid = intval($item['id']);
        $num = intval($item['num']);
        $stmt = $connection->prepare("SELECT sale_price FROM product WHERE id = ?");
        $stmt->bind_param("i", $pid);
        $stmt->execute();
        $result = $stmt->get_result();
        $row = $result->fetch_assoc();
        if($row) {
            $total += intval($row['sale_price']) * $num;
        }
        $stmt->close();
    }
}
echo json_encode(['total' => $total]);
?>

优化建议 #

如果你不想每次计算都发起Ajax请求，也可以在商品选择时把对应单价缓存到元素的data-price属性上，前端直接计算总价，减少服务器请求开销。

内容的提问来源于stack exchange，提问作者Khairunnisa Syahfitri