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