0

我想检查用户名是否可以免费用于 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 需要一些时间来响应，而且点击某处会更快——这会导致检查不正确。如果你理解我的问题有什么想法吗？

4

3 回答 3

1

我认为“单击某处更快”是指用户能够在输入得到验证之前单击提交。使用$.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");
      }
    });
  });
});
于 2013-05-01T07:51:13.357 回答
1

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

另外最好使用.prop()方法来修改 disabled 属性

尝试

(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);
于 2013-05-01T07:45:31.130 回答
1

你是对的，你需要等待 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"); 
    } 
  });
于 2013-05-01T07:49:26.190 回答