我该如何让很多jQuery ajax调用看起来很漂亮？

Question

我正在做许多ajax基于呼叫的网络服务。 我附加了每个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); 
}); 

Answer 2

使用通用类：

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

添加监听到这个类：

$('.button').on('click', function() { 
//find the index of the element and use it 
    var btnNumber= $(".button").index(this)+1; 

    $.ajax({ 
     url: '/api/1/resource'+btnNumber, 
     data: { 
      value1: 'value1', 
      value2: 'value2' 
     }, 
     success: function (response) { 
      $('.some_dom'+btnNumber).html(Handlebars.resource({items:response.items})); 
     } 
    }); 
}); 

您还可以使用任何类型的属性，并在以后使用的任何数据或参数

如：

<a href="javascript:void(0);" abc="hello1" class="button">button1</a> 
<a href="javascript:void(0);" abc="hello2" class="button">button2</a> 
<a href="javascript:void(0);" abc="hello3" class="button">button3</a> 
<a href="javascript:void(0);" abc="hello4" class="button">button4</a> 

，然后将其用于任何目的

$('.button').on('click', function() { 
    var dVal=$(this).attr('abc'); 
//use dVal any where you want. 
    alert(dVal); 

}); 

Answer 3

您可以跟随这种变化：

<a href="javascript:void(0);" data-url="/api/1/resource1" class="button">button1</a> 
<a href="javascript:void(0);" data-url="/api/1/resource2" class="button">button2</a> 
<a href="javascript:void(0);" data-url="/api/1/resource3" class="button">button3</a> 
<a href="javascript:void(0);" data-url="/api/1/resource4" class="button">button4</a> 

。利用data-*属性来保持其将要点击每一个环节的具体网址。现在只有一个变化，你必须对所有的Ajax调用一个共同的单击事件：

$('.button').on('click', function() { 
    var url = $(this).data('url'); 
    var index = $(this).index(); 
    $.ajax({ 
    url: url, 
    data: { 
     value1: 'value1', 
     value2: 'value2' 
    }, 
    success: function(response) { 
     $('.some_dom'+index).html(Handlebars.resource({items: response.items})); 
    } 
    }); 
}); 

按你的问题你的更新，你可以尝试这样做：

success: function(response) { 
     if(url.indexOf('1') != -1){ 
      $('.some_dom1').html(Handlebars.resource({items: response.items})); 
     }else if(url.indexOf('2') != -1){ 
      $('.some_dom2').html(Handlebars.resource({items: response.items})); 
     }else if(url.indexOf('3') != -1){ 
      $('.some_dom3').html(Handlebars.resource({items: response.items})); 
     } 
    } 

在成功你必须检查如果ajax调用的当前url与其他调用有所不同，那么如果匹配，则可以在if/else if条件中区分它。

Answer 4

你可以给所有标签提供一个通用的按钮类，你可以有一个单一的事件处理程序。然后根据其他班级名称，您可以使用不同的网址和数据拨打电话。

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


var ajaxFunc = function(url, data, successFun){ 
    $.ajax({ 
     url: url, 
     data:data, 
     success: successFun 
    }); 
} 

$('button').on('click', buttonClick); 


function buttonClick(){ 
    var elem = $(event.target), 
     url='', data; 
    if(elem.hasClass('button1')){ 
     url = '/api/1/resource1'; 
     data = { 
      value1: 'value1', 
      value2: 'value2' 
     } 
     ajaxFunc(url, data, successFun1); 
    } else if(elem.hasClass('button2')){ 
     url = '/api/1/resource2'; 
     data = { 
      value1: 'value1', 
      value2: 'value2' 
     } 
     ajaxFunc(url, data, successFun2) 
    } else if(elem.hasClass('button3')){ 
     url = '/api/1/resource3'; 
     data = { 
      value1: 'value1', 
      value2: 'value2' 
     } 
     ajaxFunc(url, data, successFun3) 
    } 
    else if(elem.hasClass('button4')){ 
     url = '/api/1/resource4'; 
     data = { 
      value1: 'value1', 
      value2: 'value2' 
     } 
     ajaxFunc(url, data, successFun4) 
    } 
} 

function successFun1(evt){ 

} 
function successFun2(evt){ 

} 

如果你没有做任何不同的事情，那么你可以只用一个成功函数。

Answer 5

锚标签模板，可就是这样

<a data-url="url" data-dataId="dataKey" data-success="functionName" onclick="ajax_call(this);">button</a> 

或

<a href="javascript:void(0);" data-completeObj="completeObj" onclick="ajax_call(this);" class="button">button</a> 

然后javascript和jQuery部分。 使用密钥存储每个请求传递的所有参数，该密钥必须匹配html数据属性。

var myBigJsonObj = { 
    data1 : { "foo": "bar" }, 
    data2 : { "foo": "bar", "foo1": "bar1"}     
}; 

用户定义的成功函数。同样可以有错误功能。

function success() { 
    // Do some stuff here 
    alert('Success'); 
} 

最后是ajax请求调用。

function ajax_call(obj) { 
    var url = obj.getAttribute('data-url'); 
    var data = myBigJsonObj[obj.getAttribute('data-dataID')]; 
    var success = obj.getAttribute('data-success'); 

    $.ajax({ 
     url: url, 
     data: data, 
     success: window[success].call(); 
    }); 
}