我怎样才能使许多jQuery ajax调用看起来很漂亮？

Question

我正在制作许多基于ajax调用的Web服务.我为每个dom元素添加了事件监听器.每个事件处理程序都在其中请求ajax调用.顺便说一下,我的源代码越来越脏和复杂.我希望减少样板代码,并使用ajax调用看起来更简单.

我怎样才能有效地做到这一点？

示例代码如下所示:

<a href="javascript:void(0);" class="button1">button1</a>
<a href="javascript:void(0);" class="button2">button2</a>
<a href="javascript:void(0);" class="button3">button3</a>
<a href="javascript:void(0);" class="button4">button4</a>

$('.button1').on('click', function() {
    $.ajax({
        url: '/api/1/resource1',
        data: {
            value1: 'value1',
            value2: 'value2'
        },
        success: function (response) {
            $('.some_dom1').html(Handlebars.resource({items:response.items}));
        }
    });
});

$('.button2').on('click', function() {
    $.ajax({
        url: '/api/1/resource2',
        data: {
            value1: 'value1',
            value2: 'value2'
        },
        success: function (response) {
            $('.some_dom2').html(Handlebars.resource({items:response.items}));
        }
    });
});

$('.button3').on('click', function() {
    $.ajax({
        url: '/api/1/resource3',
        data: {
            value1: 'value1',
            value2: 'value2'
        },
        success: function (response) {
            $('.some_dom3').html(Handlebars.resource({items:response.items}));
        }
    });
});

$('.button4').on('click', function() {
    $.ajax({
        url: '/api/1/resource4',
        data: {
            value1: 'value1',
            value2: 'value2'
        },
        success: function (response) {
            $('.some_dom4').html(Handlebars.resource({items:response.items}));
        }
    });
});

更新:

每个类名和ajax响应处理程序彼此不相同.示例代码仅显示样板代码和复杂性.这不是类名或if else语句的问题.

Answer 1

做这样的共同功能:

String.prototype.endsWith = function(suffix) {
   return this.indexOf(suffix, this.length - suffix.length) !== -1;
};

var doAjax_params_default = {
    'url': null,
    'requestType': "GET",
    'contentType': 'application/x-www-form-urlencoded; charset=UTF-8',
    'dataType': 'json',
    'data': {},
    'beforeSendCallbackFunction': null,
    'successCallbackFunction': null,
    'completeCallbackFunction': null,
    'errorCallBackFunction': null,
};


function doAjax(doAjax_params) {

    var url = doAjax_params['url'];
    var requestType = doAjax_params['requestType'];
    var contentType = doAjax_params['contentType'];
    var dataType = doAjax_params['dataType'];
    var data = doAjax_params['data'];
    var beforeSendCallbackFunction = doAjax_params['beforeSendCallbackFunction'];
    var successCallbackFunction = doAjax_params['successCallbackFunction'];
    var completeCallbackFunction = doAjax_params['completeCallbackFunction'];
    var errorCallBackFunction = doAjax_params['errorCallBackFunction'];

    //make sure that url ends with '/'
    /*if(!url.endsWith("/")){
     url = url + "/";
    }*/

    $.ajax({
        url: url,
        crossDomain: true,
        type: requestType,
        contentType: contentType,
        dataType: dataType,
        data: data,
        beforeSend: function(jqXHR, settings) {
            if (typeof beforeSendCallbackFunction === "function") {
                beforeSendCallbackFunction();
            }
        },
        success: function(data, textStatus, jqXHR) {    
            if (typeof successCallbackFunction === "function") {
                successCallbackFunction(data);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            if (typeof errorCallBackFunction === "function") {
                errorCallBackFunction(errorThrown);
            }

        },
        complete: function(jqXHR, textStatus) {
            if (typeof completeCallbackFunction === "function") {
                completeCallbackFunction();
            }
        }
    });
}

然后在你的代码中:

$('.button').on('click', function() {
  var params = $.extend({}, doAjax_params_default);
  params['url'] = `your url`;
  params['data'] = `your data`;
  params['successCallbackFunction'] = `your success callback function`
  doAjax(params);
});