Reusable jquery ajax requests_问答_开发者_运维开发者技术经验分享

I am developing a web application using asp.net mvc... I am listing out the details of Clients,Staff,Reports via ajax requests using jquery... What i am doing is writing seperate functions(jquery ajax requests) for each actions (ie) view,add,edit,Delete ...

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

How to make these functions into a single function and just pass the values to the function... Is there way to do this...

As all your functions have similar AJAX setup options I would recommend you to setup common options globally using the $.ajaxSetup function:

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

Next let's first consider the getClients and getDrivers functions. Those look pretty much the same. The only difference I can see between them is the url you are sending the AJAX request and the html that's being appended to the #ResultsDiv. So you could have two separate functions that handle the result:

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

and

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

And finally the two functions could be merged into a single one:

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

Now when you want to get the current clients:

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

and when you want to get the current drivers:

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

Next let's consider the getClientbyId and getDriverById functions. They could be simplified to:

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

The same pattern could be used for the rest.