jqueryajax的成功并不意味着';我不能在Firefox中工作
我有一个小小的AJAX调用:jqueryajax的成功并不意味着';我不能在Firefox中工作,jquery,ajax,google-chrome,firefox,Jquery,Ajax,Google Chrome,Firefox,我有一个小小的AJAX调用: $('#brick-mixer-form').submit(function(e) { e.preventDefault(); $("#mix-bricks-submit").addClass("load"); $("#mix-bricks-submit").attr("value", "Blander sten.."); var form_data = $("#brick-mixer-f
$('#brick-mixer-form').submit(function(e) {
e.preventDefault();
$("#mix-bricks-submit").addClass("load");
$("#mix-bricks-submit").attr("value", "Blander sten..");
var form_data = $("#brick-mixer-form").serialize()
$.ajax({
type: "GET",
url: "build.php",
data: form_data,
dataType: 'text',
async: false,
success: function(data) {
$(".active").attr('src', 'build.php?'+form_data+'').load(function() {
$("#mix-bricks-submit").removeClass("load");
$("#mix-bricks-submit").attr("value", "Bland igen");
$("#bricks-selected").attr("value", form_data);
$("#pdf_saver").css("display", "block");
});
}
});
});
在谷歌Chrome中,这是完美的,但在Firefox中,我只能触发一次
当我再次按下提交按钮“mix bricks submit
”时,它将不会再次运行呼叫。请尝试以下操作:
背景
$.ajax({
type: "GET",
url: "build.php",
data: form_data,
dataType: 'text',
async: false,
cache: false,
success: function(data) {
$(".active").attr('src', 'build.php?'+form_data+'').load(function() {
$("#mix-bricks-submit").removeClass("load");
$("#mix-bricks-submit").attr("value", "Bland igen");
$("#bricks-selected").attr("value", form_data);
$("#pdf_saver").css("display", "block");
});
根据url,参数不是可选的,因此
$('#brick-mixer-form').submit(function(e) {
e.preventDefault();
$("#mix-bricks-submit").addClass("load");
$("#mix-bricks-submit").attr("value", "Blander sten..");
var form_data = $("#brick-mixer-form").serialize()
$.ajax({
type: "GET",
url: "build.php",
data: form_data,
dataType: 'text',
async: false, //I would avoid forcing synchronous
success: function(data) {
//$(".active").attr('src', 'build.php?'+form_data+'').load(function() {
$("#mix-bricks-submit").removeClass("load");
$("#mix-bricks-submit").attr("value", "Bland igen");
$("#bricks-selected").attr("value", form_data);
$("#pdf_saver").css("display", "block");
//});
}
});
});
或
虽然我不确定为什么要执行两次ajax语句,但这是由原始询问者作为编辑添加的,我已将其转换为社区wiki答案,因为它应该是答案,而不是编辑
解决方案:
$('#brick-mixer-form').submit(function(e) {
e.preventDefault();
var nowis = new Date();
$("#mix-bricks-submit").addClass("load");
$("#mix-bricks-submit").attr("value", "Blander sten..");
var form_data = $("#brick-mixer-form").serialize()
$.ajax({
type: "GET",
url: "build.php",
data: form_data,
dataType: 'text',
success: function(data) {
$(".active").attr('src', 'build.php?'+form_data+'&tstamp='+ nowis.getMilliseconds() +'').load(function() {
$("#mix-bricks-submit").removeClass("load");
$("#mix-bricks-submit").attr("value", "Bland igen");
$("#bricks-selected").attr("value", form_data);
$("#pdf_saver").css("display", "block");
});
}
});
});
通过在查询中插入一个带有毫秒值的
tstamp
参数,我将在每次提交表单时强制使用一个新的图像名称,这似乎覆盖了FF和IE中的缓存问题。removeasync:false
,Ajax以异步而非同步开始:)您能添加与此JavaScript配套的HTML吗?嗯。。这仍然不起作用。如果我在.load函数中放入一个警报(“Test”)
,它将在FF中触发,但build.php不会重新加载。
$('#brick-mixer-form').submit(function(e) {
e.preventDefault();
var nowis = new Date();
$("#mix-bricks-submit").addClass("load");
$("#mix-bricks-submit").attr("value", "Blander sten..");
var form_data = $("#brick-mixer-form").serialize()
$.ajax({
type: "GET",
url: "build.php",
data: form_data,
dataType: 'text',
success: function(data) {
$(".active").attr('src', 'build.php?'+form_data+'&tstamp='+ nowis.getMilliseconds() +'').load(function() {
$("#mix-bricks-submit").removeClass("load");
$("#mix-bricks-submit").attr("value", "Bland igen");
$("#bricks-selected").attr("value", form_data);
$("#pdf_saver").css("display", "block");
});
}
});
});