Ajax 提交表单不起作用 Firefox

Ajax Submit Form not work Firefox

本文关键字：Firefox 不起作用 表单 提交 Ajax      更新时间：2023-09-26

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

首先，click处理程序中不需要submit处理程序。您只需要一个submit处理程序，因为类型为 submit 的按钮无论如何都会触发submit处理程序。使用 submit 处理程序的另一个优点是，即使使用 Enter 键也可以提交表单！我已经删除了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等中对我有用。

这是一个使用 jsFiddle 中的 ajax 模拟器 URL 的演示。

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

因此，

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



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


尝试一下也无妨。我还建议查看 FireFox 控制台以查看抛出的 JavaScript 错误。

相关文章：