Question

А大家好，我遇到问题，以下代码在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>

Answer 1

首先，您在submit处理程序中不需要click处理程序。您只需要一个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。

Answer 2

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

因此，

'$。ajax（{...}}'

成为

'jQuery.ajax（{...}）'。

尝试也没有什么害处，我还建议您查看FireFox控制台以查看也抛出的JavaScript错误。

Ajax提交表单不适用于Firefox

2 个答案: