javascript - 查询ajax-根据AJAX响应更改调用函数的返回值？

Question

这个问题已经被多次提出和回答，答案是“从成功回调中调用另一个函数”。不幸的是，由于几个原因，我不知道如何使这个答案在我的情况下起作用。

对于初学者来说，被调用的 ajax 是 ajaxForm 的提交函数。

1. 在一个地方我调用 ajax 提交，调用函数 ITSELF 需要返回 true 或 false，具体取决于 AJAX 调用是否成功以及从中返回的一些数据。这是基于在多个地方使用的选项卡小部件:您可以将一个函数绑定(bind)到选项卡，该函数在单击选项卡时运行。选项卡小部件本身期望此函数返回 true(显示选项卡)或 false(不显示选项卡)。由于我的整个网站都使用此选项卡小部件，因此更改此行为充其量也很困难。

2. 表单本身可以从多个地方提交，因此我不能简单地从成功处理程序中调用此选项卡函数的其余部分(即使我重新编写了选项卡处理程序以异步工作)，因为当表格在其他地方提交时，这可能不是对成功的适当 react 。在本例中，我想显示用户单击的选项卡。在另一种情况下，我想重新加载页面或重置表单(新的空白表单)，在第三种情况下，我想转到不同的页面。但在所有情况下，它都是对提交相同表单的响应。

我想我可以做到这一点，这样标签在单击时总是切换，然后(通过设置标志或其他东西，这样只有在单击标签后才会发生)如果提交不起作用，则切换回来，但这感觉很困惑。那么，有没有办法让调用函数等待回调完成呢？还是有另一种方式来构建我没有想到的东西？

编辑:我现在有一个当前结构的jsfiddle available here 。总体思路是，在我知道 jquery 有选项卡小部件之前，我需要选项卡，所以我编写了自己的选项卡。它有效，所以我认为没有理由改变:-)。

文档准备好后，具有相应类的每个按钮都会分配一个单击处理程序。流程如下:

1. onClick 处理程序触发 beforeShow 事件来运行绑定(bind)到选项卡对象的函数(如果有)
2. beforeShow 函数在显示选项卡之前执行所需的任何准备工作(例如加载数据)。如果需要，可以在此处将选项卡对象的“显示”数据设置为 false，以防止显示选项卡 - 例如，如果在当前选项卡上检测到错误，需要在切换之前修复该错误。
3. beforeShow 函数返回后，onClick 处理程序会检查“show”数据是否设置为 false，如果没有，则隐藏所有其他选项卡并显示单击的选项卡。

所以我的困境是，为了防止显示选项卡，我需要在 onClick 处理程序检查选项卡对象之前(即在 beforeShow 函数期间)将选项卡对象的“显示”数据设置为 false。但由于 AJAX 回调是异步的，因此直到 onClick 处理程序完成之后我才得到 AJAX 的结果来查看是否应该显示选项卡 - 从而显示选项卡。

正如我提到的，我可以做一些事情，比如存储当前选项卡，如果 ajax 结果指示不显示新选项卡，则切换回来，但这对我来说感觉不对。

点击处理程序:

function changeTab(){
    var jqButton=$(this);
    jqButton.data('show',true); //start by assuming we will show the tab.
    if(jqButton.hasClass("current")) //don't do anything if switching to the current tab
        return;

    //run the "before show" function, if any.
    jqButton.trigger('beforeShow');
    var showTab=jqButton.data('show'); //see if the show flag has been set to false

    if(showTab===false) //if no before show function, then showTab is null, not false
        return; //if false, then don't show the tab.

    $(".tabDiv").hide();

    //run any "after hide" scripts bound to the current tab
    $('.tabButton.current').trigger('afterHide');

    var requestedDiv=jqButton.val(); //the "value" of the tab button is the ID of the tab content div
    $("#"+requestedDiv).show(); //may show nothing, if no div exists for the current tab.
    $(".tabButton").removeClass("current"); //remove the current class from all tab buttons, so it will only be applied to the new current tab button.
    jqButton.addClass("current");
}

Answer 1

这正是你想要的

function tab2BeforeShow(){
    var $form = $('#SomeajaxFormObject'); // This is the form you want to submit
    // I'd probably show some load indicator here
    var result;
        $.ajax({
        url: $form.attr('action'),
        type: 'POST',
        data: $form.serialize(),
        async: false,
        success: function(response) {
            result = true; // set the result variable declared in outer function
        },
        error: function() {
            result = false; // bad response - dont show new tab
        }
    });

    // Hide your load indicator now

    // since we declared async: false on the ajax request, 
    // we can be positive that result is set to a boolean value at this point
    $(this).data('show', result);
}

我们向您的表单操作 URL 发送同步帖子，序列化表单的数据，以便我们可以使用它进行 ajax POST。这应该会出现，也许需要一些小的调整。

这里的关键因素是我们将 data 设置为 $form.serialize() 并将 async 设置为 false，因此浏览器当请求正在运行时不会继续执行。

如果有任何方法可以避免使用同步ajax，那么您确实应该这样做。如果你无法避免它，这应该对你有用。请注意，如果服务器挂起，它也会挂起您的客户端。