Ajax如何发布到数组

I would like to post to 'add', which also holds the attribute of size, quantity, color, and price, without refreshing the page. How can I do this?

example.php

// Add item
if (isset($_POST['add'])) {
    foreach ($products as $product) {
        if ($_POST['id'] == $product->id) {
            break;
        }
    }

    $cart->add($product->id, $_POST['qty'], [
        'price' => $product->price,
        'color' => (isset($_POST['color'])) ? $_POST['color'] : '',
        'size' => (isset($_POST['size'])) ? $_POST['size'] : '',
    ]);

}

here is the code I have so far to post to 'add' without refreshing but not sure if its correct.

$('.add-to-cartnon').on('click', function(){

var $btn = $(this);
var id = $btn.parent().parent().find('.product-id').val();
var color = $btn.parent().parent().find('.color').val() || '';
var qty = $btn.parent().parent().find('.quantity').val();
var size = $btn.parent().parent().find('.size').val() || '';
var add= $btn.parent().parent().find('.add').val() || '';


$.ajax ({
    method: 'post',
    url: 'example.php',
    data: {             
        id: id,
        color: color,
        qty: qty,
        size:size,
        add:add
    },
    success: function(data) {

    }
});

I can make this work if i wanted to post and refresh by adding :

var $form = $('<form action="?a=cart" method="post" />').html('<input type="hidden" name="add" value=""><input type="hidden" name="id" value="' + id + '"><input type="hidden" name="color" value="' + color + '"><input type="hidden" name="size" value="' + size + '"><input type="hidden" name="qty" value="' + qty + '">');

$('body').append($form);
$form.submit();

$('.add-to-cartnon').on('click', function () {

    var $btn = $(this);
    var id = $btn.parent().parent().find('.product-id').val();
    var color = $btn.parent().parent().find('.color').val() || '';
    var qty = $btn.parent().parent().find('.quantity').val();
    var size = $btn.parent().parent().find('.size').val() || '';

    var dataArray = {id: id, color: color, qty: qty, size: size};

    $.ajax({
        method: 'post',
        url: 'example.php',
        data: {
            add: dataArray
        },
        success: function (data) {
        }
    });
});