Question

我试图使用以下代码验证用户名是否存在。但它在某种程度上无法阻止现有的用户名。 **注意：checkusr2.php是一个简单的php来检查数据库中的用户名。

function verifyUser() {
    var usr = $("#username").val();
    $.ajax( {  
        type: "POST",  
        url: "checkusr2.php",  
        data: "username="+ usr,  
        success: function(msg) {
            $("#txtHint").ajaxComplete(function(event, request, settings){
                FormErrors = false;
                if(msg == 'OK') {
                    FormErrors = true;
                    $('#formElem').data('username',FormErrors); 
                } else {
                    $('#formElem').data('username',FormErrors);
                }
            });
        }
    });
}

/ **调用要检查的函数。 ** /

verifyUser();
if($('#formElem').data('username')){
    alert('Username exist, please try another username.');
    return false;
}

Answer 1

使用像Charles，Fiddler，WireShark等的http代理来查看您发送的ajax请求，并验证响应是否符合预期。

首先，您正在进行异步调用（Ajax中的A）以获取用户名是否存在的响应。一旦调用verifyUser，就会立即调用verifyUser调用之后的check，并且checkusr2.php的请求可能已经或者可能没有实际返回。

我也从未在成功处理程序中看到过ajaxComplete。我想你可能想改变它：

function verifyUser() {
    var usr = $("#username").val();
    $.ajax( {  
        type: "POST",  
        url: "checkusr2.php",  
        data: "username="+ usr,  
        success: function(msg) {
            if(msg != 'OK') {
                alert('Username exists, please try another username.');
                $("#username").val("");
            }
        };

    });
}

Answer 2

您的问题是尝试同步使用verifyUser。代码似乎相当合理，问题是$ .ajax使用XMLHTTPRequest异步执行。这意味着紧跟调用verifyUser之后的代码不能依赖于其完成的副作用。

您需要做的是提前运行verifyUser回调（例如，当用户取消对焦用户名字段时），以便在提交时您已经获得结果。

例如：

$('#username').blur(function() { verifyUser() });

进一步的更改不是阻止提交，而是当用户名无效时，您可以使verifyUser在字段旁边显示带有消息的div。您将对处理程序进行以下更改：

            if(msg == 'OK') {
                FormErrors = true;
                $('#username_invalid').show();
            } else {
                $('#username_invalid').hide();
            }

然后您可以向用户显示无法立即选择用户名，而不会浪费时间提交用户名。

Answer 3

试试这个

$("#txtHint").ajaxComplete(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html' && xhr.responseHTML=="Ok") {
                FormErrors = true;
                $('#formElem').data('username',FormErrors); 
            } else {
                $('#formElem').data('username',FormErrors);
            }
})

Answer 4

感谢您提出我不知道的.ajaxComplete（）。我认为将来对我有很大的帮助但无论如何，我不认为这是你想要在这个特定情况下使用的：

function verifyUser() {
  var usr = $("#username").val();
  $.ajax( {  
    type: "POST",  
    url: "checkusr2.php",  
    data: {'username':usr},  
    success: function(msg) {
      if ( msg != 'OK' ) {
         alert('Username exist, please try another username.');
         return false;
      }
    });
  });
}

在Ajax调用之后要执行的函数必须作为Ajax函数的回调传递，否则，即使你把它放在Ajax函数之后，它也会在服务器响应之前执行。

关于用户名验证的JQuery .ajax（）

4 个答案: