jQuery Ajax 返回成功,尽管错误是由 PHP 发送的(DOM Issue?)


jQuery Ajax returns success although error is send by PHP (DOM Issue?)

我现在在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;
    });

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

我可以看到你的代码存在一些问题:

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

请注意,我已经删除了ajaxSuccess事件,并为您的 ajax 请求实现了error事件。

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

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