Ajax 提交表单不起作用 Firefox答案

【问题标题】：Ajax Submit Form not work FirefoxAjax 提交表单不起作用 Firefox
【发布时间】：2015-09-06 10:06:25
【问题描述】：

А 大家好，我有一个问题，以下代码在 Firefox 中没有正确和完整地执行，因为它应该在点击提交后出现在服务器的某个东西（收费，检查错误）上，但 Firefox 确实如此不行，正常提交就好了，好像没有ajax一样……

你能帮帮我吗？

提前非常感谢您！

<script type="text/javascript">
$(document).ready(function() {
  $("#submit_form").click(function() {
    $("#source_form").submit(function(e) {
      $("#response_form").html("<div class='alert alert-info'><b><i class='fa fa-spinner fa-spin'></i> Un momento...</b></div>");
      var postData_form = $(this).serializeArray();
      var formURL_form = $(this).attr("action");
      $.ajax({
        url: formURL_form,
        type: "POST",
        data: postData_form,
        success: function(data, textStatus, jqXHR) {
          $("#response_form").html('' + data + '');
          $('#submit_form').prop("disabled", false);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          $("#response_form").html('Error: <br/> ' + JSON.stringify(jqXHR) + '');
          $('#submit_form').prop("disabled", false);
        }
      });
      e.preventDefault();
      $("#source_form").unbind();
      $('#submit_form').prop("disabled", true);
    });
    $("#source_form").submit();
  });
</script>

HTML：

<form role="form" method="post" id="source_form" action="check_login.php">
<div class="form-group">
<label for="Email">Usuario o Email</label>
<input type="text" name="Usuario" class="form-control" id="Email" placeholder="Usuario o Email" title="Ingresa tu usuario o email" required value="">
</div>
<div class="form-group">
<label for="Password">Contrase&ntilde;a <a href="#" onclick="url_target('/inc/recupera.password.php?frame=1');">(Recuperar contrase&ntilde;a)</a></label>
<input type="password" name="Password" class="form-control" id="Password" placeholder="Password" title="Ingresa tu password asignado" required value="">
</div>
<div id="response_form" align="center"></div>
<div id="submit_div"><button type="submit" class="btn btn-primary" id="submit_form">Conectarse</button></div>
</form>

【问题讨论】：

它在其他浏览器中是否有效？浏览器的控制台中是否出现任何错误？为什么要将提交处理程序在点击处理程序绑定？ getDoc() 函数是干什么用的？在所示代码中的任何地方都没有调用它。
需要在ajax请求前停止传播
如果它可以在其他浏览器中运行，但是 Firefox 我只是在我有问题的地方补充代码谢谢

标签： javascript jquery html ajax firefox

【解决方案1】：

首先，click 处理程序中不需要submit 处理程序。您只需要一个submit 处理程序，因为submit 类型的按钮无论如何都会触发submit 处理程序。使用submit 处理程序的另一个优点是即使使用回车键也可以提交表单！我删除了click 处理程序，稍微修改了您的ajax 以使其更清洁。查看并修改代码以满足您的需求。

$(document).ready(function() {
    $("#source_form").submit(function(e) {
        e.preventDefault();
        $('#submit_form').prop("disabled", true);
        $("#response_form").html("<div class='alert alert-info'><b><i class='fa fa-spinner fa-spin'></i> Un momento...</b></div>");
        var postData_form = $(this).serializeArray();
        var formURL_form = $(this).attr("action");

        $.ajax({
            url: formURL_form,
            type: "POST",
            data: postData_form
        }).done(function(data, textStatus, jqXHR) {
            $("#response_form").html(data);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            $("#response_form").html('Error: ' + jqXHR. statusText);
        }).always(function() {
            $('#submit_form').prop("disabled", false);
        });
    });
});

以上方法在 FF、Chrome、Safari 等中对我有用。

这里是 a demo，它使用 jsFiddle 中的 ajax 模拟器 URL。

【讨论】：

【解决方案2】：

这可能不是一个深入的回应，但是，根据 Ajax 文档，“$”符号是编写“jQuery”的快捷方式。更改 '.ajax' 之前的 '$' 符号可能是值得的，因为 FireFox 或 Edge 可能会将 '$' 符号解释为变量或函数。

因此，

'$. ajax({... }}'

变成

'jQuery.ajax({...})'。

试试看也无妨. 我还建议查看 FireFox 控制台以查看引发的 JavaScript 错误。

【讨论】：