मैं कई jQuery AJAX कॉल कैसे सुंदर बना सकता हूं?

Question

मैं कई AJAX कॉल आधारित वेब सेवा बना रहा हूं। मैंने ईवेंट श्रोताओं को हर डोम तत्व संलग्न किया। और हर घटना हैंडलर इसमें 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

आप इस परिवर्तन को पालन कर सकते हैं: प्रत्येक लिंक जो क्लिक किया जा रहा है के लिए विशिष्ट URL रखने के लिए data-* विशेषता का

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

उपयोग करें।

$('.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})); 
    } 
    }); 
}); 

अपने प्रश्न में अपने अद्यतन के अनुसार यदि आप ऐसा करने की कोशिश कर सकते हैं:: अब सिर्फ एक परिवर्तन और आप सभी ajax कॉल के लिए एक आम क्लिक करें घटना के लिए होता है

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 कॉल का वर्तमान यूआरएल अन्य कॉलों के लिए कुछ अलग है, तो यदि वह मेल खाता है तो आप 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> 

की तरह हो सकता है

फिर जावास्क्रिप्ट और 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(); 
    }); 
}