jQuery AJAX 成功在 Firefox 中不起作用答案

【问题标题】：jQuery AJAX success doesn't work in FirefoxjQuery AJAX 成功在 Firefox 中不起作用
【发布时间】：2012-10-11 10:20:53
【问题描述】：

我有这个小小的 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-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");
           });
        }
     });
});

在谷歌浏览器中这很完美，但在 Firefox 中我只能触发一次。

当我再次按下提交按钮“mix-bricks-submit”时，它不会再次运行调用。

【问题讨论】：

删除async: false，Ajax 以异步而不是同步开始:)
能否请您添加与此 JavaScript 一起使用的 HTML？

标签： jquery ajax google-chrome firefox

【解决方案1】：

根据.load() 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");
           //});
           }
        });
});

或

$('#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").load('build.php',form_data,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 语句

【讨论】：

【解决方案2】：

试试这个：

设置

$.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");
           });

【讨论】：

嗯..这仍然行不通。如果我在 .load 函数中添加 alert("Test") ，它将在 FF 中触发，但不会重新加载 build.php。

【解决方案3】：

_{这是原始提问者作为编辑添加的，我已将其转换为社区 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 中的缓存问题。

【讨论】：