我现在在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/的东西,它允许您排队和取消请求。