Question

我正在尝试在用户使用ajax单击提交按钮时向表单添加加载gif，并且我还要禁用提交按钮。我试过这种方式，但它不起作用。我的按钮的ID为“提交”

 <script type="text/javascript">                                 
// we will add our javascript code here
jQuery(document).ready(function($) {

    $("#ajax-contact-form").submit(function() {
        var str = $(this).serialize();

        $.ajax({
            type: "POST",
            url: "contactfinal.php",
            data: str,
            success: function(response) {
 $('submit').html('<img src="img/ajax-loader.gif" /> &nbsp; sending...').attr('disabled', 'disabled');
                $('#error').html(response);

            }
        });
        return false;
    });
});
</script>

Answer 1

以这种方式试试

$.ajax({
  type: "POST",
  url: "contactfinal.php",
  data: str,
  success: function(response) {
    // $('#error').html(response);
  }
  beforeSend: function() {
    $('submit').html('<img src="img/ajax-loader.gif" /> &nbsp; sending...').attr('disabled', 'disabled');
  },
  complete: function() {
    $('submit').html('').attr('disabled', '');
  },
});

当ajax确定浏览器完全收到服务器响应后，

beforeSend方法将在ajax等待服务器响应时执行操作，complete也将执行操作。

希望你能得到这个想法。

Answer 2

jQuery(document).ready(function($) {
$("#ajax-contact-form").submit(function() {

        var str = $(this).serialize();

        $.ajax({
            type: "POST",
            url: "contactfinal.php",
            data: str,
            beforeSend: function() {
                $("#submit").hide();
                 $("#loading").show();
                  },
            success: function(response) {
               $('#error').html(response);
                $("#submit").show();
                $("#loading").hide();

            }
        });
        return false;
    });
});

使用ajax提交表单时，不会出现gif微调器

2 个答案: