0

我现在用 jQuery Ajax-Request 挣扎了一段时间。我正在构建一个分步评级表。实际上，每个步骤都将提交一个表单（当前步骤将被传输到 PHP，只有对该步骤重要的数据将被验证）。

问题：

Ajax 调用被提交了很多次而没有重新加载页面。尽管 ajax 调用（登录到 Firebug 控制台）返回了正确的值（例如，如果 PHP 验证失败则出错）jQuery 仍然首先选择旧的返回值（例如，旧的错误或成功）并再次检查代码。

代码

这是我的jQuery函数..

    $(ajax_cont).find(':submit').live('mouseup keyup',function(){

        submitButton  = $(this);

    });

    $(ajax_cont).live("submit", function(d) {

        var index = submitButton.attr("id").substring(9);

        d.preventDefault();

        var str = $(this).serialize() + "&step=" + index;
        var uri = ajax_default;

        $.ajax({

            type: "POST",
            cache: false,
            asynch: false,
            url: uri,
            data: str,
            success: function(data) {

                $(".step_slider_container").ajaxComplete(function(event, request, settings) {

                    if(data.success) {

                        alert("jaa");

                        var next_step = "";

                        $(ajax_cont).parent().find(".error").html("").hide();
                        $(ajax_cont).find(".error_input").removeClass("error_input");

                        next_step = data.next;

                        console.log(data.next);

                        step_check = $(ajax_cont).find(".step_check").val();

                        if(step_check.indexOf(next_step) == -1) {

                            step_check = step_check + "," + next_step;

                        }

                        $(ajax_cont).find(".step_check").val(step_check);

                        var enabled_array = step_check.split(',');

                        $.each(enabled_array, function(enabled_index, enabled_value) {

                            if(enabled_array[enabled_index].length > 0) {

                                tmp_div = enabled_array[enabled_index];

                                $("body").find(".step_" + tmp_div).removeClass("disabled");

                            }

                        });

                        // Show - Hide Container

                        var id = "#step_" + next_step;

                        fadeDiv(id);

                        if(next_step == 3) {

                            preview_rating();
                            setHeight(ajax_cont.height());

                        }

                        // Navigation

                        $("body").find(".step").removeClass("step_active");
                        $("body").find(".step_" + next_step).addClass("step_active");

                    }

                    if(data.error) {

                        next_step = "";

                        $(ajax_cont).find(".error_input").removeClass("error_input");

                        error       =   data.error;
                        error_ids   =   data.error_id;

                        $.each(error_ids, function(index, value) {

                            id = "#" + error_ids[index];

                            $(id).addClass("error_input");

                        });

                        $(ajax_cont).parent().find(".error").html("<p>" + error + "</p>").show();

                        setHeight(ajax_cont.height());

                    }

                });

            },
            dataType: "json"

        });

        return false;

    });

我希望有人能找到问题的答案.. 似乎让我发疯:(

4

2 回答 2

0

我同意@thecodeparadox - 代码墙。太多的代码和太少的代码一样糟糕:-)

纯粹按照您所说的，听起来您有多个 AJAX 提交，并且您正在使用来自较旧请求的响应。尝试使用 Ajax Manager http://www.protofunc.com/scripts/jquery/ajaxManager/之类的东西，它可以让您排队和取消请求。

于 2012-05-30T10:07:13.870 回答
0

我可以看到您的代码存在一些问题：

a) 您在 ajax 调用的成功事件中设置 ajaxSuccess 事件... b) 您data.success用于确定它是否成功，这不会因为 PHP 错误而改变。

相反，您应该这样做：

$(ajax_cont).find(':submit').live('mouseup keyup',function(){

    submitButton  = $(this);

});

$(ajax_cont).live("submit", function(d) {

    var index = submitButton.attr("id").substring(9);

    d.preventDefault();

    var str = $(this).serialize() + "&step=" + index;
    var uri = ajax_default;

    $.ajax({

        type: "POST",
        cache: false,
        asynch: false,
        url: uri,
        data: str,
        success: function(data) {

            if(data.success) {

                alert("jaa");

                var next_step = "";

                $(ajax_cont).parent().find(".error").html("").hide();
                $(ajax_cont).find(".error_input").removeClass("error_input");

                next_step = data.next;

                console.log(data.next);

                step_check = $(ajax_cont).find(".step_check").val();

                if(step_check.indexOf(next_step) == -1) {

                    step_check = step_check + "," + next_step;

                }

                $(ajax_cont).find(".step_check").val(step_check);

                var enabled_array = step_check.split(',');

                $.each(enabled_array, function(enabled_index, enabled_value) {

                    if(enabled_array[enabled_index].length > 0) {

                        tmp_div = enabled_array[enabled_index];

                        $("body").find(".step_" + tmp_div).removeClass("disabled");

                    }

                });

                // Show - Hide Container

                var id = "#step_" + next_step;

                fadeDiv(id);

                if(next_step == 3) {

                    preview_rating();
                    setHeight(ajax_cont.height());

                }

                // Navigation

                $("body").find(".step").removeClass("step_active");
                $("body").find(".step_" + next_step).addClass("step_active");

            }

            if(data.error) {

                next_step = "";

                $(ajax_cont).find(".error_input").removeClass("error_input");

                error       =   data.error;
                error_ids   =   data.error_id;

                $.each(error_ids, function(index, value) {

                    id = "#" + error_ids[index];

                    $(id).addClass("error_input");

                });

                $(ajax_cont).parent().find(".error").html("<p>" + error + "</p>").show();

                setHeight(ajax_cont.height());

            }

        },
        error : function()
        {
            alert('there was an error parsing the json, or processing your request');
        },
        dataType: "json"

    });

    return false;

});

请注意，我已删除该事件并为您的 ajax 请求ajaxSuccess实现了一个事件。error

于 2012-05-30T10:13:26.210 回答