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;
            }
        });
    }

我尝试了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);
        }
    });
}

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

1 个答案: