Question

我的网站上有产品，我打电话将产品插入购物车，但点击按钮有问题。当我点击列表中的第一个产品时一切正常但其他产品按钮没有反应

    <?php foreach ($products as $product):?>
       <?php if($product['kateg'] == "men"):?>       

<h5 style="color: #0669b4; min-height: 70px;"><?php echo $product['dasax']?></h5>
                                <p style="text-align: left; text-decoration: overline">Old price: <strong><span style="text-decoration: line-through"><?php echo round($product['fasi1'], 2)?> GEL</span></strong><br></p>
                                <p style="text-align: left">New Price: <strong><?php echo round($product['fasi2'], 2)?> GEL</strong><br></p>



        <input type="hidden" value="<?php echo $product['id']?>" id="product_id">
        <input type="hidden" value="<?php echo $product['dasax']?>" id="product_name">
        <input type="hidden" value="<?php echo $product['fasi2']?>" id="product_price">
        </a>
        <button class="btn btn-primary" type="submit" id="add_to_cart">Add</button>
        <?php endif;?>
    <?php endforeach;?>

<script>
    $(document).ready(function () {

        $('#add_to_cart').click(function () {
            var product_id = $("#product_id").val();
            var product_name = $("#product_name").val();
            var product_price = $("#product_price").val();

                $.ajax({
                    url: "/uketesi/index",
                    method: "POST",
                    dataType: "json",
                    data: {
                        product_id:product_id,
                        product_name:product_name,
                        product_price:product_price,
                    },
                    success:function (data) {
                      alert("produqti warmatebit daemata")
                $("#კალათა").html("<table id=\"example2\" class=\"table table-bordered table-hover\">" +
                    "<thead>" +
                    "<tr>" +
                    "<th>დასახელება</th>" +
                    "<th>ფასი</th>" +
                    "<th>იდენტიფიკატორი</th>" +
                    "</tr>" +
                    "<tr>" +
                    "<td>" + product_name + "</td>" +
                    "<td>" + product_price + "</td>" +
                    "<td>" + product_id + "</td>" +
                    "</tr>" +
                    "</thead>" +
                    "</table>");
                    }
                });
        });
    });

</script>

我想出了如何解决上面的问题，我有另一个问题，我如何使用此代码添加多个产品。现在我只能添加一个产品，当我点击另一个产品时旧的分散。

Answer 1

您可以从按钮上的数据 - * =“”属性获取数据。所以不需要隐藏的输入。对于click事件，您应该使用类名。其他案例ID不会是唯一的。请尝试以下代码。

    <?php foreach ($products as $product):?>
       <?php if($product['kateg'] == "men"):?>       

<h5 style="color: #0669b4; min-height: 70px;"><?php echo $product['dasax']?></h5>
                                <p style="text-align: left; text-decoration: overline">Old price: <strong><span style="text-decoration: line-through"><?php echo round($product['fasi1'], 2)?> GEL</span></strong><br></p>
                                <p style="text-align: left">New Price: <strong><?php echo round($product['fasi2'], 2)?> GEL</strong><br></p>

        </a>
        <button class="btn btn-primary" type="submit" class="add_to_cart" data-id="<?php echo $product['id']?>" data-name="<?php echo $product['dasax']?>" data-price="<?php echo $product['fasi2']?>">Add</button>
        <?php endif;?>
    <?php endforeach;?>

<script>
    $(document).ready(function () {

        $('.add_to_cart').click(function () {


            var product_id = $(this).data('id');
            var product_name = $(this).data('name');
            var product_price = $(this).data('price');

                $.ajax({
                    url: "/uketesi/index",
                    method: "POST",
                    dataType: "json",
                    data: {
                        product_id:product_id,
                        product_name:product_name,
                        product_price:product_price,
                    },
                    success:function (data) {

                    }
                });
        });
    });

</script>

Answer 2

现在我们有了表单，jQuery包含在我们的文档中，我们需要将它的值存储在2个变量中，（val1和val2），然后我们可以将它传递给PHP文件来处理它。

$('#button').click(function() {
    var val1 = $('#text1').val();
    var val2 = $('#text2').val();
    $.ajax({
        type: 'POST',
        url: 'process.php',
        data: { text1: val1, text2: val2 },
        success: function(response) {
            $('#result').html(response);
        }
    });
});

正如您在上面的代码中看到的，我们创建了一个.click事件。这意味着当单击ID为#button的按钮时，将运行out函数。然后我们得到每个文本字段的值并将其存储在val1和val2中。

如何在按钮点击时使用ajax将数据发送到php

2 个答案: