Question

我有一个表单my_form，每当用户更改一些数据时，需要通过jquery刷新表单（例如，更改表单中的某些元素）。为了知道要改变什么，需要执行AJAX调用

$('#my_form').change(function() {
   ...execute an ajax call and change the form via jquery
});

当用户在文本框中键入内容然后单击提交按钮（或按Enter键）时会出现问题：change（）事件和提交都是同时触发的，结果是“out of内存“阻止提交表单的错误。

我知道这是一个典型的问题，典型的解决方案是避免使用经典的提交按钮，并在ajax调用完成时通过jquery控制提交。这里的问题是我不想在每次执行ajax调用时提交表单（仅当用户实际提交时）并且我不想在用户提交表单时再次执行ajax调用。

完美的解决方案是：提交后，等待所有ajax调用结束，然后提交。我认为这是不可能的，除非你在循环中检查ajaxStop，我不认为这是一个安全的解决方案。还有其他办法吗？

另一个解决方案就是提交表单，尽管事实上正在进行AJAX调用，实际上这不会影响用户体验。我该怎么办？

编辑：我发现了真正的问题：为了在ajax调用执行时显示加载器，我实现了我在这里找到的解决方案 How can I create a "Please Wait, Loading..." animation using jQuery?（接受回答）。

由于某种原因，modal元素阻止在未隐藏时（即当ajax调用正在执行时）提交表单;如果我将元素的高度从100％降低到60％（我已经猜到任何使元素不覆盖提交按钮的值都可以，但我不确定它是否是巧合）它可以工作。

任何人都可以向我解释实际发生了什么，以及如何安全地继续使用该解决方案？感谢。

Answer 1

您可以停用＆＃34;提交＆＃34;按钮，直到ajax调用完成，再次启用它。

$('#my_form').change(function() {
    $('#my_form input[type=submit]').prop('disabled' true);
    $.ajax({
          .....
          success : function(data) {
              //... change the form
              $('#my_form input[type=submit]').prop('disabled' false);
          }
    });
})

Answer 2

因此，假设每次通过单击更改某些数据时，都会触发.change事件。这与选择和喜欢发生。剩下的是文本框...

$(":input").keypress(function (event) {
        $("#my_form").change();
    });

:input选择器选择需要输入的所有元素，而不仅仅是<input>元素。您还可以使用仅获取文本框的选择器。当我使用该功能时，在触发更改事件之前，我检查了是否按下了回车键，并且只有在这种情况下我才会进行更改。我也会编写那些代码以防它可能有所帮助：

$("#txtFilter").keypress(function (event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                $("#txtFilter").change();
            }
        });

编辑：嗯......这让我想起你也可以用更简单的方式做到这一点！

$('#my_form').change(function(e) {
   e.preventDefault();
   ...execute an ajax call and change the form via jquery
});

e.preventDefault（）应该停止提交！

表单提交需要等待ajax调用，ajax调用不必提交

2 个答案: