如何减少Jquery / Ajax代码->删除重复项

Question

I have this Jquery/Ajax code which sends GET requests and I think there is a lot of duplication. How to reduce this code?

$(".add_to_cart").click(function() {
    product_slug = $(this).attr("data-slug")
    data = {
        product_slug: product_slug,
    },

    $.ajax({
        type: "GET",
        url: "{% url 'cart:cart_create' %}",
        data: data,
        success: function(data) {
            $(".cart_score").html(data.cart_length + " товаров " + data.cart_total + " ₽")
        },
    });
});

$(".update_cart").click(function() {
    product_slug = $(this).attr("data-slug")
    quantity = $(this).val()
    data = {
        product_slug: product_slug,
        quantity: quantity,
    }
    $.ajax({
        type: "GET",
        url: "{% url 'cart:cart_update' %}",
        data: data,
        success: function(data) {
            $(".cart_score").html(data.cart_length + " товаров " + data.cart_total + " ₽")
            $(".cart_total").html(data.cart_total + " ₽")
            $(".item_total_price-"+product_slug).html(data.cart_price + " ₽")
        },
    });
});

$(".del_from_cart").click(function() {
    product_slug = $(this).attr("data-slug")
    data = {
        product_slug: product_slug,
    },

    $.ajax({
        type: "GET",
        url: "{% url 'cart:cart_delete' %}",
        data: data,
        success: function(data) {
            $(".cart_score").html(data.cart_length + " товаров " + data.cart_total + " ₽")
            $(".cart_total").html(data.cart_total + " ₽")
            $(".item_product-"+product_slug).css("display", "none")

            if (data.cart_length < 1) {
                $(".cart_score").html("<a href='{% url 'cart:cart_show' %}' class='cart_score'>Корзина пустая</a>")
                $(".cart_block").html("<p>Корзина пуста <a href='{% url 'shop:product_list' %}'>выбрать модель</a></p>")
            }
        },
    });
});

$(".clear_cart").click(function() {
    $.ajax({
        type: "GET",
        url: "{% url 'cart:cart_clear' %}",
        success: function() {
            $(".cart_score").html("<a href='{% url 'cart:cart_show' %}' class='cart_score'>Корзина пустая</a>")
            $(".cart_block").html("<p>Корзина пуста <a href='{% url 'shop:product_list' %}'>выбрать модель</a></p>")
        },
    });
});

I'm new to Javascript, any ideas? at least a small example :)

Answer 1

Create One Common Generic Ajax Call this way

You can Refer more From here

function CommonAjaxCall(type, url, parameters, successCallback) {

                $.ajax({
                    type: type,
                    url: url,
                    data: JSON.stringify(parameters),
                    contentType: 'application/json;',
                    dataType: 'json',
                    success: successCallback,
                    error: function(xhr, textStatus, errorThrown) {
                        console.log('error');
                    }
                });
            }

CommonAjaxCall(type, url, pars, onSuccess);

function onSuccess(result) {
//perform your logic from here
}