jQuery：而ajax请求块元素

Question

因此，我在JS中具有此功能，发送请求以将新的Status消息插入数据库。

function DoStatusInsert(){
  var wrapperId = '#statusResponseNow';
    $.ajax({ 
       type: "POST",
       url: "misc/insertStatus.php",
    data: {
    value: 'y',
    uID : $('#uID').val(),
    message : $('#message').val() 
    },
       success: function(msg){
     $('#message').val("");
     $('#statusResponse').toggle(); 
     $(wrapperId).prepend(msg);
     $(wrapperId).children().first().fadeIn('slow');
        }
     });
}

使用这种形式：

<input name="message" type="text" id="message" value="" size="60">  
<input type="hidden" name="uID" id="uID" value="<?php echo $v["id"]; ?>">
<input name="submit" type="submit" id="submit" value="Spara">
<div id="statusResponseNow"></div>

现在，我希望做类似阻止提交按钮或消息字段为“只读”的操作，直到收到响应/成功为止，这样您就没有机会喜欢按提交多次，因此它会插入很多。我知道您可以制作一个php，以便在DB中进行double´s检查）

因此：当您单击“提交”时，它将使消息字段和/或“提交”按钮变为只读

我该怎么办？

Answer 1

function DoStatusInsert(){
  $('#IdOfYourSaveButton').attr('disabled', 'disabled');
  var wrapperId = '#statusResponseNow';
    $.ajax({ 
       type: "POST",
       url: "misc/insertStatus.php",
       data: {
       value: 'y',
       uID : $('#uID').val(),
       message : $('#message').val(),
       success: function(msg){
          $('#IdOfYourSavebutton').removeAttr('disabled');
          $('#message').val("");
          $('#statusResponse').toggle(); 
          $(wrapperId).prepend(msg);
          $(wrapperId).children().first().fadeIn('slow');
        }
  });
}

启用并禁用该按钮。 好，易于 ：）

Answer 2

调用该函数时，设置按钮的Disabled属性，然后在成功时将其重新设置。

function DoStatusInsert(){
 $('#submit').attr("disabled", "true");

 var wrapperId = '#statusResponseNow';
    $.ajax({ 
       type: "POST",
       url: "misc/insertStatus.php",
    data: {
    value: 'y',
    uID : $('#uID').val(),
    message : $('#message').val() 
    },
       success: function(msg){
         $('#message').val("");
         $('#statusResponse').toggle(); 
         $(wrapperId).prepend(msg);
         $(wrapperId).children().first().fadeIn('slow');
         $('#submit').attr("disabled", "false");
        }
     });
}

Answer 3

我最初的想法是插入

$（'input [type = submit]'，this）.attr（'disabled'，'disabled'）;

在启动ajax调用之前，然后使用ajax请求的成功功能删除Disabled属性。

Answer 4

手动切换按钮的禁用状态效果很好，但是jQuery有一些辅助事件，可以使它们变得更好： .ajaxStart（）和.ajaxStop（） 。 您可以在提交按钮上使用这两个处理程序，而不必担心在$ .ajax（）请求周围维护该手动代码。

只需将其与您的其他初始化代码一起放入，可能在$（document）.ready（）中：

$('#submit').ajaxStart(function() { this.disabled = true; });

$('#submit').ajaxStop(function() { this.disabled = false; });

Answer 5

您可以使用http://jquery.malsup.com/block/中的 jQuery BlockUI插件（请参阅http://jquery.malsup.com/block/#element和http://jquery.malsup.com/上的演示块/＃demos ）。

如果包含您需要阻止的所有表单元素的div ID为formDiv则可以调用

jQuery('#formDiv').block({ message: '<h1>Just a moment...</h1>' });

在jQuery.ajax和调用之前

jQuery('#formDiv').unblock();

作为jQuery.ajax success和error处理程序的第一行。