可重用的jquery ajax请求

Question

可重用的jquery ajax请求

ACP*_*ACP 4 asp.net-mvc jquery code-reuse

我正在使用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 += '<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;
}

Run Code Online (Sandbox Code Playgroud)

如何将这些函数转换为单个函数并将值传递给函数...有没有办法做到这一点......

Answer 1

Dar*_*rov 6

由于您的所有功能都有类似的AJAX设置选项,我建议您使用该$.ajaxSetup功能全局设置常用选项:

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

Run Code Online (Sandbox Code Playgroud)

接下来让我们首先考虑getClients和getDrivers功能.那些看起来几乎一样.我可以在它们之间看到的唯一区别是你发送AJAX请求的url和被附加到的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>';
}

Run Code Online (Sandbox Code Playgroud)

和

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

Run Code Online (Sandbox Code Playgroud)

最后,这两个函数可以合并为一个函数:

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

Run Code Online (Sandbox Code Playgroud)

现在,当您想要获得当前客户时:

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

Run Code Online (Sandbox Code Playgroud)

当你想获得当前的驱动程序时:

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

Run Code Online (Sandbox Code Playgroud)

接下来让我们考虑一下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;
}

Run Code Online (Sandbox Code Playgroud)

其余的可以使用相同的模式.

归档时间：	15 年，6 月前
查看次数：	1431 次
最近记录：	15 年，6 月前