在javascript函数中添加Php请求

Question

I am trying to add a line which allows me to send a request to add.php.

As soon as we click on this function, we give also a request via the page add.php?id=1

$('.js-addcart-b1').each(function(){
        var nameProduct = $(this).parent().parent().find('.js-name-b1').html();
        $(this).on('click', function(e){
          e.preventDefault();
            swal(nameProduct, "is added to cart !", "success");
        });
    });

Where should I put the command in method [GET]?

Answer 1

To send a request to the server (add.php?id=1) you should use jQuery's ajax() method:

var productId = 1; // hardcoded, only for example!

$.ajax({
    url: "add.php",
    type: "GET",
    data: {id: productId},
    success: function(result){

        swal(nameProduct, "is added to cart !", "success");
    },
    error: function(error){

        console.log(error);
    }
});

Full code with your example below:

$('.js-addcart-b1').each(function(){

   var nameProduct = $(this).parent().parent().find('.js-name-b1').html();

   $(this).on('click', function(e){

        e.preventDefault();
        
        var productId = 1; // hardcoded, only for example!

        $.ajax({
            url: "add.php",
            type: "GET",
            data: {id: productId},
            success: function(result){

                swal(nameProduct, "is added to cart !", "success");
            },
            error: function(error){

                console.log(error);
            }
        });
   });
});

In your example there's a GET request, I suggest you to use POST for sensitive data, it's more secure. As others suggested you need to get the id from somewhere in your HTML to pass it to the server.

More information about jQuery ajax

</div>