demandes jquery ajax réutilisables

Question

Je développe une application web en utilisant asp.net mvc ... Je suis la liste des détails des clients, du personnel, des rapports via des requêtes ajax en utilisant jquery ... Ce que je fais est écrit des fonctions séparées (jquery demandes ajax) pour chaque action (ie) afficher, ajouter, modifier, supprimer ...

//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; 
} 

Comment rendre ces fonctions en une seule fonction et il suffit de passer les valeurs à la fonction ... y at-il moyen pour ce faire ...

Answer 1

Comme toutes vos fonctions ont des options de configuration AJAX similaires, je vous recommande de configurer des options communes globalement en utilisant la fonction $.ajaxSetup:

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

nous allons d'abord examiner ensuite les fonctions getClients et getDrivers. Ceux-ci ressemblent à peu près la même chose. La seule différence que je peux voir entre eux est l'URL que vous envoyez la requête AJAX et le code html qui est ajouté au #ResultsDiv. Donc, vous pourriez avoir deux fonctions distinctes qui gèrent le résultat:

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>'; 
} 

et

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>'; 
} 

Et enfin les deux fonctions pourraient être fusionnées en une seule:

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; 
} 

Maintenant, quand vous vouloir obtenir les clients actuels:

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

et quand vous voulez obtenir les pilotes actuels:

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

---

Ensuite, nous allons examiner les fonctions getClientbyId et getDriverById. Ils pourraient être simplifiés à:

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; 
} 

Le même motif pourrait être utilisé pour le reste.