Ajax POST request to Shopify's /cart/add.js always returning on error callback function

Question

$.ajax({
                                    type: 'POST',
                                    url: '/cart/add.js',
                                    data: {
                                        quantity: 1,
                                        id: form_data
                                    },
                                    success: function(response) {
                                        console.log('in success');
                                        var url = $("#af-btn").attr("href");

                                        window.location.href = $("#af-btn").attr("href");
                                    },
                                    error: function(response) {
                                        console.log(response + "in error");
                                        var url = $("#af-btn").attr("href");

                                        //window.location.href = $("#af-btn").attr("href");

                                    },
                                    complete: function(response) {
                                        console.log(response);
                                    }
                                });

Above is my AJAX request. Below is the response Object.

Add to cart to shows anonymous behavior, sometimes product gets added and sometimes product is not added. Can't figure it out. Any ideas?
Below is the form_data

How I retrieve its value,

var form_data = $('form[action="/cart/add"]').find('select[name="id"]').find(":selected").val();

Answer 1

The standard AJAX call was throwing errors for me as well in one instance( even thought the product was included in the cart ).

So instead I used their API for the AJAX call. Here is a link to all of the functions: http://mayert-douglas4935.myshopify.com/pages/api

For example adding the items is easy as:

  Shopify.addItem($productVal, $productQTY, function(){
    // Do Something here once the product is added
    console.log('Success!!!')
  });

PS:

Have in mind that you will be required to include this script in order to have access to the calls:

{{ 'api.jquery.js' | shopify_asset_url | script_tag }}

Answer 2

This is how I solved it for using the Shopify Ajax Api in Shopify app whose script was added through Shopify Admin API ScriptTag.

1- Load Shopify jQuery Ajax Api Wrapper

function loadShopifyAjaxApiScript()
{

var script = document.createElement("script");
script.rel = "text/javascript";
script.src = "https://cdn.shopify.com/s/assets/themes_support/api.jquery-0ea851da22ae87c0290f4eeb24bc8b513ca182f3eb721d147c009ae0f5ce14f9.js";
document.getElementsByTagName("head")[0].appendChild(script);

}

2- Then use it like below :

            Shopify.addItem(variantId , 1 , function () {
            console.log('success');
        });

Resource Link : API jQuery Ajax Shopify Sandbox