可重用的jquery ajax请求

我正在使用asp.net mvc开发一个Web应用程序……我通过使用jquery的ajax请求列出了客户端，人员，报告的详细信息…我正在做的是为每个动作编写单独的函数（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 += '

' + this.ClientName + 'Mobile No : ' + this.ClientMobNo + '

Address : ' + this.ClientAddress + '
'; }); $("#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 += '

' + this.DriverName + 'Mobile No : ' + this.DriverMobileNo + '
'; }); $("#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函数。 那些看起来几乎一样。 我可以在它们之间看到的唯一区别是您发送AJAX请求的URL和附加到#ResultsDiv的html。 所以你可以有两个独立的函数来处理结果：

 function formatDriversResult(result) { return '

' + result.DriverName + 'Mobile No : ' + result.DriverMobileNo + '
'; } 

和

 function formatClientsResult(result) { return '

' + result.ClientName + 'Mobile No : ' + result.ClientMobNo + '

Address : ' + result.ClientAddress + '
'; } 

最后，这两个函数可以合并为一个函数：

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

其余部分可以使用相同的模式。