Question

我想检查用户名是否可以免费使用AJAX和jQuery。

这是注册输入字段

      <tr> 
          <td><input type = "text" id ="new_username"/></td>
      </tr>
      <tr>
        <td></td>
        <td id ="information"></td>
     </tr>
     <input type = "submit" id = "sign-up" value = "Sign up" />

这是带有ajax的jquery部分

(function($){
$(document).ready(function(){
    $('#new_username').blur(function() {
        var newUsername = $(this).val(); 

        $.post('../registration/check-username.php', 
            { 
                newUsername : newUsername  
            }, function (data) {
                $('#information').html(data);
            }
        );  
    }); 

    if( $("#information").html() != "" ) { 
        $("#sign-up").attr('disabled', 'disabled');
    } else { 
        $("#sign-up").removeAttr("disabled"); 
    }     
});
})(jQuery);

如果有任何问题 - “信息”td会收到一些错误消息。如果用户名是免费的，则它是空的，没有任何通知。问题是ajax响应需要一些时间，而且点击某处更快 - 这会导致检查不正确。如果你理解我的问题，有什么想法？

Answer 1

这是因为$.post是异步请求意味着一旦将请求发送到服务器以验证脚本执行将继续的用户名。在您的情况下，这意味着在服务器响应之前将执行if条件，因此解决方案是在回调方法中移动if条件。

最好使用.prop()方法修改已禁用的属性

尝试

(function($){
    $(document).ready(function(){
        $('#new_username').blur(function() {
            var newUsername = $(this).val(); 

            $.post('../registration/check-username.php', 
                   { 
                       newUsername : newUsername  
                   }, function (data) {
                       $('#information').html(data);

                       $("#sign-up").prop('disabled', data != "");
                   }
                  );  
        });         
    });
})(jQuery);

Answer 2

你是对的，你需要等待AJAX响应回来。如果不完全重构代码，只需在响应返回后进行检查。你是对的，你需要等待AJAX响应回来。如果不完全重构代码，只需在响应返回后进行检查。

$.post('../registration/check-username.php', 
  { 
    newUsername : newUsername  
  }, function (data) {
    $('#information').html(data);
  }).done(function(){
    if( $("#information").html() != "" ) { 
      $("#sign-up").attr('disabled', 'disabled');
    } else { 
       $("#sign-up").removeAttr("disabled"); 
    } 
  });

Answer 3

我想通过“点击某处更快”，你指的是用户可以在输入验证之前点击提交。使用$.ajax() beforeSend方法解决此问题：

$(document).ready(function(){
  $('#new_username').blur(function() {
    $.ajax({
      url: "../registration/check-username.php",
      data: {
        newUsername: $(this).val()
      },
      beforeSend: function() {
        $("#sign-up").attr("disabled","disabled");
      },
      success: function(data) {
        $('#information').html(data);
        if( !data )
          $("#sign-up").removeAttr("disabled");
      }
    });
  });
});

jQuery AJAX比访问DOM元素慢

3 个答案: