ajax - 在自定义方法中调用 ajax 并将 ajax 结果返回给被调用的方法

Question

在我的 JSP 中，我有链接和按钮，因为我想调用 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;
            }
        });
    }

我试过这个链接，但我不知道如何在我的自定义方法上使用回调。还有一些其他的事件我也需要称之为 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);
        }
    });
}