Многоразовый Ajax вызов с разными параметрами

Question

Я занимаюсь разработкой программного обеспечения, которое ajax вызывает веб-API и возвращает некоторые данные. Завершив большую часть работы, я возвращаюсь назад, чтобы посмотреть, смогу ли я выполнить рефакторинг любого кода. Из этого я понял, что я делаю несколько вызовов ajax, которые выполняют одну и ту же функцию, помимо параметров, передаваемых в них. Имея это в виду, я хотел реорганизовать вызов ajax в функцию или компонент многократного использования, которые я затем мог бы передавать по разным параметрам для каждого вызова, значительно уменьшая объем кода. Это вызов ajax, который я создал:

function AjaxCall (ajaxUrl, ajaxData){
        return $.ajax({
            type: "GET",
            url: ajaxUrl,
            data: {
                ajaxData: ajaxData
            },
            dataType: 'JSON'
        });
    }

Позже в моем коде я затем вызвал это как ...

var brandId = $('#brandDropdownList option:selected').prop('id');
var ProductUrl = "http://localhost:54442/api/products/GetProducts";

var getProducts =  AjaxCall(ProductUrl, brandId);

getProducts.done(function(data) {
            $('#productDropdownList').html('').append('<option id="-1" disabled selected="selected">Please Select a Product...</option>');
            $.each(data, function(key, val) {
                $('#productDropdownList').append('<option id="' + val.productId + '">' + val.productName + '</option>');
            })
        })

В этом я получаю идентификатор поля из пользовательского интерфейса и хранится в переменной с именем brandId. Затем я задаю URL-адрес для вызова ajax. Затем я вызываю функцию AjaxCall, передавая productUrl и brandId. Затем getProduct.done - это успех, в результате которого я добавляю данные в раскрывающийся список, однако это уместно в контексте вопроса.

По сути, мой вопрос заключается в том, что, когда в повторно используемом компоненте я использовал ajaxData, мне нужно ajaxCall для использования переданного в параметре brandId. Таким образом, фактический ajax звонок, который мне нужен, равен

function AjaxCall (ajaxUrl, brandId){
        return $.ajax({
            type: "GET",
            url: ajaxUrl,
            data: {
                brandId: brandId
            },
            dataType: 'JSON'
        });

Это приводит к запросу на следующий URL "http://localhost: 54442 / api / products / GetProducts? BrandId = 1"Это то, что я хочу. Но каждый раз, когда я хочу сделать ajax вызов, переменная brandId изменится, например, на productId. Таким образом, есть способ получить повторно используемый вызов ajax, который я могу передать в различные переменные (brandId, ProductId и многие другие), но также изменить переменную в разделе данных вызова ajax на переданную переменную иначе результирующий URL-адрес выглядит следующим образом: "http://localhost: 54442 / api / products / GetProducts? ajaxData = 1 ".

Надеюсь, это имеет смысл. Заранее спасибо

Answer 1

В функции свойство data:, переданное $.ajax(), должно быть ajaxData:

function ajaxCall (ajaxUrl, ajaxData){
    return $.ajax({
        type: "GET",
        url: ajaxUrl,
        data: ajaxData,
        dataType: 'JSON'
    });
}

Затем, когда вы вызываете его, вы можете передать объект с любыми параметрами:

let promise = ajaxCall(someUrl, { brandId: brandId });

Answer 2

Конечно, просто заставьте второй параметр принимать объект в качестве аргумента. Таким образом, вы можете передать любое количество параметров в вызов $.ajax.

function AjaxCall (ajaxUrl, ajaxData){
    return $.ajax({
        type: "GET",
        url: ajaxUrl,
        data: ajaxData,
        dataType: 'JSON'
    });
}

var ajaxData = {
    brandId: 5
};

AjaxCall('/products/GetProducts', ajaxData).done(function(data) {
  console.log(data);
});