javascript - 禁用表单和所有包含的元素，直到 ajax 查询完成(或其他解决方案以防止多个远程请求)

Question

我有一个包含输入和选择的搜索表单，当任何输入/选择更改时，我运行一些 js，然后使用 jquery 进行 ajax 查询。我想阻止用户在请求进行期间进一步更改表单，因为此时他们可以同时启动多个远程搜索，有效地导致不同搜索之间的竞争。

似乎最好的解决方案是防止用户在等待请求返回时与表单交互。目前，我正在以最愚蠢的方式执行此操作，方法是在进行 ajax 查询之前隐藏表单，然后在成功/错误时再次显示它。这解决了问题，但看起来很糟糕并且不是真的可以接受。还有另一种更好的方法来防止与表单交互吗？为了让事情变得更复杂，为了允许漂亮的选择，用户实际上与连接了 js 的 span 交互，以将它们与实际的、隐藏的选择联系起来。因此，即使 span 不是输入，它们也包含在表单中并代表表单的实际交互元素。

感谢任何建议 - 最多。这是我现在正在做的:

function submitQuestionSearchForm(){
  //bunch of irrelevant stuff  
  var questionSearchForm = jQuery("#searchForm");
  questionSearchForm.addClass("searching");
  jQuery.ajax({
    async: true, 
    data: jQuery.param(questionSearchForm.serializeArray()), 
    dataType: 'script', 
    type: 'get', 
    url: "/questions", 
    success: function(msg){ 
      //more irrelevant stuff
      questionSearchForm.removeClass("searching");                           
    },
    error: function(msg){ 
      questionSearchForm.removeClass("searching");                           
    }    
  }); 
  return true;
}

'searching' 类目前只有 {display: none}

Answer 1

我用这个插件http://jquery.malsup.com/block/ ，它实现了一个可以应用于 Div 或整个页面的半透明 img，它非常好并且支持跨浏览器。

编辑:正如某些人所说，此插件不会阻止表单输入、选择等...如果您真的希望它是防弹的并且不允许人们乱用您需要实现进一步阻止的表单，我建议使用纯类似这样的 HTML 解决方案 https://stackoverflow.com/a/36586206/118447