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


Я занимаюсь разработкой программного обеспечения, которое делает вызовы 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 ".

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

javascriptjqueryajax

Всего 2 ответа

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

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

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

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

Конечно, просто заставьте второй параметр принимать объект в качестве аргумента. Таким образом, вы можете передать любое количество параметров в вызов $.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);
});