jQuery AJAX Post not posting data

Question

Right I have given in, after about 2 hours trying to figure out this issue I've caved, help me out stackoverflow!

Trying to post a product id along with quantity to a php file that will return errors if it finds any

jQuery code -

$('span.add_to_cart').click(function () {
        $('div.cart').append('<span class="loading">LOADING</span>');
        $.ajax({
            type: "POST",
            url: "/onlineshop/scripts/add_to_cart.php",
            dataType: "json",
            data: { prod_id: $('input.product_id').val(), 
                    quantity: $('input.quantity').val()
            },
            contentType: "application/json",
            success: function(data) {
                $('span.loading').remove();
            },
            error: function(xhr, textStatus, thrownError, data) {
                alert("Error: " + thrownError);
                $('span.loading').remove();
            }
        })
    });

And my PHP page is just trying to print_r($_POST)

It seems that it is not posting my data, I've tried many many different things, all give me the error saying that there is no data being posted.

Answer 1

Try changing the contentType to application/x-www-form-urlencoded or just dropping it since it is the default value.

Answer 2

Your problem is that the data you are posting is not matching the content-type you are sending.

contentType is for the data being sent to the server, and dataType is for the data being received from the server.

Just remove the contentType: "application/json" from your code.