两个 Ajax onclick 事件答案

【问题标题】：Two Ajax onclick events两个 Ajax onclick 事件
【发布时间】：2014-06-12 09:04:33
【问题描述】：

所以我不得不修改一些旧的现有代码并将另一个 ajax 事件添加到 onclick 这样它就有onclick="function1(); function2();"

这在我们的测试环境中运行良好，因为它是一个缓慢的 VM，但在我们的实时环境中它会导致一些问题，因为 function1() 必须在调用 function2() 之前完成一些记录的更新。

有没有一种很好的方法来解决这个问题而无需修改 function2() 的 js，因为这是由其他事件调用的现有代码。

谢谢

【问题讨论】：

function2 在 function1 完成之前不会运行。除非您使用异步 ajax 请求，否则在这种情况下使用回调。
你用prototype标记你的问题，你的意思是prototypejs吗？
是的，我的意思是prototypejs
好的，我用一个使用 PrototypeJS 运行的示例更新了我的答案
async: false, 对您有帮助吗？只需让函数同步，这样函数 2 就不会执行，除非函数 1 返回您的预期值。

标签： javascript ajax prototype

【解决方案1】：

从function1返回时调用function2：

function function1() {

$.ajax({
    type: "POST",
    url: "urlGoesHere",
    data: " ",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
        //call function2

    },
    error: 
});

}

或者将它们包装在一个同时调用 1 和 2 的函数中。

【讨论】：

【解决方案2】：

你需要使用ajax方法的always回调，查看$.ajax()方法的always回调http://api.jquery.com/jquery.ajax/。

给 opiton 的回调在 ajax 请求完成时执行。这是一个建议：


function function1() {

    var jqxhr = $.ajax({
        type: "POST",
        url: "/some/page",
        data: " ",
        dataType: "dataType",
    }).always(function (jqXHR, textStatus) {
        if (textStatus == 'success') {
            function2();
        } else {
            errorCallback(jqXHR);
        }
    });

}

【讨论】：

【解决方案3】：

我假设您使用 Prototype JS 和 AJAX 因为您的标签。你应该使用回调函数：

function function1(callback) {
    new Ajax.Request('http://www.google.nl', {
        onSuccess: function(response) {
            callback();
        }
    });
}

function function2(callback) {
    new Ajax.Request('http://www.google.nl', {
        onSuccess: function(response) {
            callback();
        }
    });
}

function both() {
    function1(function() {
        function2();
    });
}

然后在你的 html 元素上使用onclick="both();"。

示例：http://jsfiddle.net/EzU4p/

【讨论】：

我不认为你提到的方式是有效的。请测试一次。
你是对的，我的代码中有很多错误。 jsfiddle 昨天下线了。我现在包含了一个工作示例。

【解决方案4】：

Ajax 有 async 属性，可以设置为 false。这样，您可以等待该函数完成它的调用并设置一些值。它实际上违背了 AJAX 的目的，但它可能会节省您的时间。

我最近遇到了类似的问题，并且在完成 function1 后以某种方式调用 function2 效果很好。我最初在 function1 成功时调用 function2 的努力没有奏效。

      $.ajax({
                type: "POST",
                url: "default.aspx/function1",
                data: "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false, // to make function Sync
                success: function (msg) {
                    var $data = msg.d;
                    if ($data == 1)
                    {
                        isSuccess = 'yes'
                    }
                },

                error: function () {
                    alert('Error in function1');
                }
            });

            // END OF AJAX

           if (isSuccess == 'yes') {
                // Call function 2
           }

【讨论】：