Многократные запросы jquery ajax

Question

Я разрабатываю веб-приложение с использованием asp.net mvc ... Я перечисляю детали клиентов, сотрудников, отчетов через запросы ajax, используя jquery ... Что я делаю, это писать отдельные функции (JQuery запросы AJAX) для каждого действия (то есть) просмотр, добавление, редактирование, удаление ...

//Clients 
function getClients(currentPage) { 
    $.ajax({ 
     url: "Clients/GetClients", 
     data: { 'currentPage': (currentPage + 1), 'pageSize': 5 }, 
     contentType: "application/json; charset=utf-8", 
     global: false, 
     async: false, 
     dataType: "json", 
     beforeSend: function() { $('.loading').show(); }, 
     complete: function() { $('.loading').hide(); }, 

     success: function(data) { 
      if (data.isRedirect && data.isRedirect === true) { 
       alert('must redirect to ' + data.redirectUrl); 
       location = 'http://www.google.com'; 
      } 
      else { 
       var divs = ''; 
       $("#hfId").val(''); 
       $("#ResultsDiv").empty(); 
       $.each(data.Results, function() { 
        divs += '<div class="resultsdiv"><br /><span style="display: inline-block;width:220px;" class="resultName">' + this.ClientName + '</span><span class="resultfields" style="padding-left:10px;">Mobile No&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + this.ClientMobNo + '</span><span style="float:right; padding-right:2px;"><input type="checkbox" value=' + this.ClientId + ' onclick="storeIds();"/></span><br/><br/><span class="resultfields">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + this.ClientAddress + '</span></div>'; 
       }); 
       $("#ResultsDiv").append(divs); 
       $(".resultsdiv:even").addClass("resultseven"); 
       $(".resultsdiv").hover(function() { 
        $(this).addClass("resultshover"); 
       }, function() { 
        $(this).removeClass("resultshover"); 
       }); 
       $("#HfId").val(""); 
       $("#HfId").val(data.Count); 

      } 
     } 
    }); 
    return false; 
} 

//Drivers 
function getDrivers(currentPage) { 

    $.ajax({ 
     url: "Staff/GetDrivers", 
     data: { 'currentPage': (currentPage + 1), 'pageSize': 5 }, 
     contentType: "application/json; charset=utf-8", 
     global: false, 
     async: false, 
     dataType: "json", 
     beforeSend: function() { $('.loading').show(); }, 
     complete: function() { $('.loading').hide(); }, 

     success: function(data) { 
      if (data.isRedirect && data.isRedirect === true) { 
       alert('must redirect to ' + data.redirectUrl); 
       location = 'http://www.google.com'; 
      } 
      else { 
       var divs = ''; 
       $("#hfId").val(''); 
       $("#ResultsDiv").empty(); 
       $.each(data.Results, function() { 
       divs += '<div class="resultsdiv"><br /><span style="display: inline-block;width:220px;" class="resultName">' + this.DriverName + '</span><span class="resultfields" style="padding-left:10px;">Mobile No&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + this.DriverMobileNo + '</span><span style="float:right; padding-right:2px;"><input type="checkbox" value=' + this.DriverId + ' onclick="storeIds();"/></span></div>'; 
       }); 
       $("#ResultsDiv").append(divs); 
       $(".resultsdiv:even").addClass("resultseven"); 
       $(".resultsdiv").hover(function() { 
        $(this).addClass("resultshover"); 
       }, function() { 
        $(this).removeClass("resultshover"); 
       }); 
       $("#HfId").val(""); 
       $("#HfId").val(data.Count); 

      } 
     } 
    }); 
    return false; 
} 

//get client by id 
function getClientbyId(clientId) { 
    $.ajax({ 
     url: "Clients/getClientById", 
     data: { 'clientId': clientId }, 
     contentType: "application/json; charset=utf-8", 
     global: false, 
     async: false, 
     dataType: "json", 
     beforeSend: function() { $('.loading').show(); }, 
     complete: function() { $('.loading').hide(); }, 
     success: function(data) { 
      $("#Name").val(data.ClientName); 
      $("#MobileNo").val(data.ClientMobNo); 
      $("#Address").val(data.ClientAddress); 
      $("#hfEditId").val(data.ClientId); 
      $("#adddiv").show(); 
      $("#ResultsDiv").hide(); 
      $("#PagerDown").hide(); 
      $("#ImageButtonDiv").hide(); 
     } 
    }); 
    return false; 
} 

//get driver by id 
function getDriverById(driverId) { 
    $.ajax({ 
     url: "Staff/getDriverById", 
     data: { 'driverId': driverId }, 
     contentType: "application/json; charset=utf-8", 
     global: false, 
     async: false, 
     dataType: "json", 
     beforeSend: function() { $('.loading').show(); }, 
     complete: function() { $('.loading').hide(); }, 
     success: function(data) { 
      $("#Name").val(data.DriverName); 
      $("#MobileNo").val(data.DriverMobileNo); 
      $("#hfEditId").val(data.DriverId); 
      $("#adddiv").show(); 
      $("#ResultsDiv").hide(); 
      $("#PagerDown").hide(); 
      $("#ImageButtonDiv").hide(); 
     } 
    }); 
    return false; 
} 


//clients delete 
function deleteClients(clientIds) { 
    $.ajax({ 
     url: "Clients/deleteClients", 
     data: { 'ids': clientIds }, 
     contentType: "application/json; charset=utf-8", 
     global: false, 
     async: false, 
     dataType: "json", 
     beforeSend: function() { $('.loading').show(); }, 
     complete: function() { $('.loading').hide(); }, 
     success: function(data) { 
     if (data.Result == "Success") { 
      getClients(0); 
      var maxvalues = $("#HfId").val(); 
      $(".pager").pagination(maxvalues, { 
       callback: getClients, 
       current_page: 0, 
       items_per_page: 5, 
       num_display_entries: 5, 
       next_text: 'Next', 
       prev_text: 'Prev', 
       num_edge_entries: 1 
      }); 
      return false; 
      } 
     } 
    }); 
    $("#alert").remove(); 
    topBar('successfully deleted'); 
    return false; 
} 

//delete drivers 
function deleteDrivers(driverIds) { 
    $.ajax({ 
    url: "Staff/deleteDrivers", 
     data: { 'ids': driverIds }, 
     contentType: "application/json; charset=utf-8", 
     global: false, 
     async: false, 
     dataType: "json", 
     beforeSend: function() { $('.loading').show(); }, 
     complete: function() { $('.loading').hide(); }, 
     success: function(data) { 
      if (data.Result == "Success") { 
       getDrivers(0); 
       var maxvalues = $("#HfId").val(); 
       $(".pager").pagination(maxvalues, { 
       callback: getDrivers, 
        current_page: 0, 
        items_per_page: 5, 
        num_display_entries: 5, 
        next_text: 'Next', 
        prev_text: 'Prev', 
        num_edge_entries: 1 
       }); 
       return false; 
      } 
     } 
    }); 
    $("#alert").remove(); 
    topBar('successfully deleted'); 
    return false; 
} 

Как сделать эти функции в одну функцию и просто передать значение функции ... есть ли способ чтобы сделать это ...

Answer 1

Поскольку все ваши функции имеют аналогичные параметры настройки AJAX, я бы рекомендовал вам установить общие параметры по всему миру с помощью функции $.ajaxSetup:

$(function() { 
    $.ajaxSetup({ 
     contentType: 'application/json; charset=utf-8', 
     global: false, 
     async: false, 
     dataType: 'json', 
     beforeSend: function() { $('.loading').show(); }, 
     complete: function() { $('.loading').hide(); }, 
    }); 
}); 

Следующая давайте сначала рассмотрим getClients и getDrivers функции. Они выглядят почти одинаково. Единственная разница, которую я вижу между ними, - это URL-адрес, по которому вы отправляете запрос AJAX и html, который добавляется к #ResultsDiv. Таким образом, вы могли бы иметь две отдельные функции, которые обрабатывают результат:

function formatDriversResult(result) { 
    return '<div class="resultsdiv"><br /><span style="display: inline-block;width:220px;" class="resultName">' + result.DriverName + '</span><span class="resultfields" style="padding-left:10px;">Mobile No&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + result.DriverMobileNo + '</span><span style="float:right; padding-right:2px;"><input type="checkbox" value=' + result.DriverId + ' onclick="storeIds();"/></span></div>'; 
} 

и

function formatClientsResult(result) { 
    return '<div class="resultsdiv"><br /><span style="display: inline-block;width:220px;" class="resultName">' + result.ClientName + '</span><span class="resultfields" style="padding-left:10px;">Mobile No&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + result.ClientMobNo + '</span><span style="float:right; padding-right:2px;"><input type="checkbox" value=' + result.ClientId + ' onclick="storeIds();"/></span><br/><br/><span class="resultfields">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + result.ClientAddress + '</span></div>'; 
} 

И, наконец, обе функции могут быть объединены в один:

function getEntities(url, currentPage, formatResultFunction) { 
    $.ajax({ 
     url: url, 
     data: { 'currentPage': (currentPage + 1), 'pageSize': 5 }, 
     success: function(data) { 
      if (data.isRedirect && data.isRedirect === true) { 
       alert('must redirect to ' + data.redirectUrl); 
       location = 'http://www.google.com'; 
      } 
      else { 
       var divs = ''; 
       $("#hfId").val(''); 
       $("#ResultsDiv").empty(); 
       $.each(data.Results, function() { 
        divs += formatResultFunction(this); 
       }); 
       $("#ResultsDiv").append(divs); 
       $(".resultsdiv:even").addClass("resultseven"); 
       $(".resultsdiv").hover(function() { 
        $(this).addClass("resultshover"); 
       }, function() { 
        $(this).removeClass("resultshover"); 
       }); 
       $("#HfId").val(""); 
       $("#HfId").val(data.Count); 

      } 
     } 
    }); 
    return false; 
} 

Теперь, когда вы хочу получить текущих клиентов:

var clients = getEntities("Clients/GetClients", currentPage, formatClientsResult); 

и когда вы хотите, чтобы получить текущие драйверы:

var drivers = getEntities("Staff/GetDrivers", currentPage, formatDriversResult); 

---

Далее давайте рассмотрим getClientbyId и getDriverById функции. Они могут быть упрощены до:

function getEntityById(data, url, formatResultFunction) { 
    $.ajax({ 
     url: url, 
     data: data, 
     success: function(data) { 
      formatResultFunction(data); 
      $("#adddiv").show(); 
      $("#ResultsDiv").hide(); 
      $("#PagerDown").hide(); 
      $("#ImageButtonDiv").hide(); 
     } 
    }); 
    return false; 
} 

Такая же модель может использоваться для отдыха.