jquery - How to call a function when using ajax promise -

i using following ajax promise application load states , districts related .

my question can call getdistricts() function after completing loadstates done call ,rather duplicating code

$(document).ready(function() {         var loadstates = $.ajax({             type: 'get',             url: url + '/depo/depo/getstates',             success: function(response) {             },             error: function(x, t, m) {             }         }); // end of loading states         loadstates.done(function() {             $("#districtslist").html("");             $.ajax({                 type: 'get',                 url: url + '/depo/depo/getdistricts?stateid=' + stateidselected,                 jsonpcallback: 'jsoncallback',                 success: function(response) {                 },                 error: function(x, t, m) {                  }             }).done(function() {                 $("#talukaslist").html("");                 var talukhtml = '<option value="">all mandals</option>';                 $("#talukaslist").html(talukhtml);                   $(".gobtn").trigger("click");             });         })         $("#hideorshow").hide();  }); // ready call ends here   function getdistricts() {     $.ajax({         type: 'get',         url: url + '/depo/depo/getdistricts?stateid=' + stateidselected,         jsonpcallback: 'jsoncallback',         datatype: 'jsonp',         success: function(response) {         },         error: function(x, t, m) {          }     }); } 

please let me know how achieve ??

get ajax functions return own promise:

function getdistricts() {     return $.ajax({         type: 'get',         url: url + '/depo/depo/getdistricts?stateid=' + stateidselected,         jsonpcallback: 'jsoncallback',         datatype: 'jsonp'     }); } 

make ajax calls similar functions (same good):

function loadstates(){     return $.ajax({          type: 'get',         url: url + '/depo/depo/getstates'     }); } 

then can chain operations.

$(document).ready(function() {     loadstates().done(function() {         $("#districtslist").html("");         getdistricts().done(function(){             $("#talukaslist").html("");             var talukhtml = '<option value="">all mandals</option>';             $("#talukaslist").html(talukhtml);               $(".gobtn").trigger("click");         });     })     $("#hideorshow").hide(); 

});

notes:

• you can remove error , success callback function ajax calls when using promises
• you missing code returned values ajax calls, possibly removed example, remember data values passed done() callbacks add parameters there.