Question

您好我有一个表格，其中约有20个输入[文本]字段。我想要做的是，只要你从一个字段移动到另一个字段，它就会触发一个ajax请求。

一切正常，但有一种奇怪的行为

当我从一个字段移动到另一个字段时，它会多次发送相同的请求。

所以在调试器中我看到类似

的东西

Request URL:http://xxxxxxx.com/ajax/loadInformation.php?autoSave=1&rowid=35139&name=FieldName&value=asd&_=1454334363440
Request URL:http://xxxxxxx.com/ajax/loadInformation.php?autoSave=1&rowid=35139&name=FieldName&value=asd&_=1454334363440

我期待总是只有一个请求，但它不一致。有时它会在4次相同的请求中发送2个相同的请求吗？

我在Chrome和IE11中遇到此问题，但没有检查其他浏览器。

$(function() {   
     $("input").focusin(function() {
        var rowid = $("input[name=RowID]").val();
        var oldValue = $(this).val();
        var name = $(this).attr("name");
        $(this).focusout(function () {
               var newValue = $(this).val();
               $.get('ajax/loadInformation.php',{autoSave: "1", rowid: rowid, name: name, value: newValue,_:$.now()});
            }
        }); 
     });
});

Answer 1

GET请求被触发两次或更多次的原因是因为每次focusin <input>您再次绑定focusout事件 < / em>的。可能的解决方案是在focusout事件中使用.one()：

$(function(){ $("input").focusin(function(){ var rowid = $("input[name=RowID]").val(); var oldValue = $(this).val(); var name = $(this).attr("name"); $(this).one('focusout', function(){ // <--- using .one() var newValue = $(this).val(); $.get('ajax/loadInformation.php',{autoSave: "1", rowid: rowid, name: name, value: newValue,_:$.now()}); }); }); });

Answer 2

你的逻辑错误，嵌套处理程序。无论如何，只需绑定focusout事件：

$(function() {
  $("input").change(function() {
      var rowid = $("input[name=RowID]").val();
      var name = $(this).attr("name");
      var newValue = $(this).val();
      $.get('ajax/loadInformation.php', {
        autoSave: "1",
        rowid: rowid,
        name: name,
        value: newValue,
        _: $.now()
      });
    }
  });
});

如果您需要将change与新oldValue进行比较，现在还不确定为什么不使用change事件。只有在值发生变化时，才会对输入模糊触发{{1}}。

Answer 3

您需要检查是否有任何AJAX调用正在进行中。这可以按如下方式完成。

    $(function() {   
             var isAjaxCallInProgress = false;

             $("input").focusin(function() {
                var rowid = $("input[name=RowID]").val();
                var oldValue = $(this).val();
                var name = $(this).attr("name");
                $(this).focusout(function () {
                  if(isAjaxCallInProgress) return;
                  isAjaxCallInProgress = true;
                  var newValue = $(this).val();
                      $.ajax({
                         url: 'ajax/loadInformation.php',
                         data: {
                           autoSave: "1", 
                           rowid: rowid, 
                           name: name, 
                           value: newValue,_:$.now()
                         },
                         success: function(data) {
                             isAjaxCallInProgress = false;
                         },
                         type: 'GET'
                       });                                    
                }); 
             });
        });

jquery + Ajax - 聚焦发送多个请求

3 个答案: