在自定義方法中調用ajax並將Ajax結果返回到我的JSP中調用的方法

Question

我有鏈接和按鈕，因爲我都想調用Ajax操作並使用結果。

我正在爲鏈接和按鈕創建事件並調用Ajax。我需要將結果返回給調用方法。

//event for button 
$(document).on('click', ".addComponent", function(){ 
     var htmlContent=$(this).html(); 
     $('.addComponent').html('Loading...').fadeIn(); 
     var urlAction=$(this).attr("id"); 
     var dataFields=$(this).data('val'); 
     var data=callActionUsingAjax(urlAction, dataFields); //data not returning from ajax 
     var ajaxActionResult=ajaxResult(data); 
     $('.addComponent').html(htmlContent).fadeIn(); 
     $('#popUpForm').html(ajaxActionResult); 
     $('#popUpForm').dialog("open"); 
     return false; 
    }); 

//event for link 
$(document).on('click', "#dimComponentList >TBODY > TR > TD > a", function(){ 
     $("body").css("cursor", "progress"); 
     var urlAction=$(this).attr("href"); 
     var dataFields=""; 
     var data=callActionUsingAjax(urlAction, dataFields); 
     var ajaxActionResult=ajaxResult(data); //ajax not returning data 
     $("body").css("cursor", "auto"); 
     $('#applicationList').html(ajaxActionResult); 
     return false; 
    }); 

這裏是我的方法調用Ajax的

function callActionUsingAjax(urlAction,datafields) 
    { 
     $.ajax({ 
      type: "post", 
      url: urlAction, 
      data: datafields, 
      success: function (data) { 
       return data; 
      } 
     }); 
    } 

我試圖this link但我不知道如何使用回撥一樣，我的自定義方法。還有一些其他事件也需要調用這個Ajax。這就是我在自定義方法中使用Ajax的原因。

誰能給我一個解決方案嗎？

Answer 1

Ajax調用是異步的，需要花時間完成，而執行繼續，這就是爲什麼你沒有任何數據在「返回」。

你需要一個回調函數傳遞給您的callActionUsingAjax並調用它在你的success處理器（依賴於邏輯

像這樣或完整或錯誤：！

$(document).on('click', ".addComponent", function(){ 
    //... other stuff 
    callActionUsingAjax(urlAction, dataFields, function (data) { //this is tha callback (third argument) 
     var ajaxActionResult=ajaxResult(data); 
     $('.addComponent').html(htmlContent).fadeIn(); 
     $('#popUpForm').html(ajaxActionResult); 
     $('#popUpForm').dialog("open"); 
     // all of the above happens when ajax completes, not immediately. 
    }); 

    return false; 
}); 

function callActionUsingAjax(urlAction, datafields, callback) 
{ 
    $.ajax({ 
     type: "post", 
     url: urlAction, 
     data: datafields, 
     success: function (data) { 
      callback(data); 
     } 
    }); 
}