0

我有一个 ajax 注册表单。用户可以在输入字段中输入所需的用户名，然后立即点击注册按钮，而检查用户名是否可用的 ajax 请求尚未完成。对于这种情况，我希望仅当检查用户名的 ajax 请求完成时才开始执行注册按钮的操作，否则等待它完成然后继续。这该怎么做？

我希望用户名验证功能保持异步，因为每次用户在输入字段上进行按键操作时它都会执行。

一种方法是在单击注册按钮时进入 setTimeout() 循环，并一直停留在该循环中，直到标志正确为止。另一种方法是在异步请求未完成时调用同步用户名检查请求。有没有更好的方法？

如果您在不使用 jQuery 的情况下给出答案，那就太好了。

4

3 回答 3

4

不要为此使用 setTimeout。

只需使用jquery ajaxsuccess的回调功能：在回调或新done助手中执行“之后”代码：

$.ajax({
  url: "test.html"
}).done(function() { 
  // do things after the answer has been received
});

编辑 ：

没有 jquery，也没有立即触发：

var httpRequest = new XMLHttpRequest();
var requestDoneAndOK = false;
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
                requestDoneAndOK = true;
        }               
    }
};
httpRequest.open('GET', url);
httpRequest.send();

当“注册”按钮被点击时，你只需要检查requestDoneAndOK它是否真的调用你的其他函数。

编辑 2：

一旦实现 2 个条件，就会执行代码：收到答案并单击注册按钮。

var registerClicked = false;
var ajaxAnswerReceived = false;
function check() {
    if (registerClicked && ajaxAnswerReceived) {
         // do the thing !
    }
}
var httpRequest = new XMLHttpRequest();
var requestDoneAndOK = false;
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
              ajaxAnswerReceived = true;
                check();
        }               
    }
};
httpRequest.open('GET', url);
httpRequest.send();
document.getElementById('registerButton').onclick = function(){
     registerClicked = true;
     check();
};
于 2012-07-16T14:05:35.027 回答
0

如果您想在不使用 jQuery 的情况下执行此操作，则需要使用使用 onreadystatechange 的默认 JavaScript 调用机制。请记住，jQuery 只是默认机制的一个包装器。我确实建议您使用 jQuery 或其他东西，以防止出现大量跨浏览器问题和 http 状态更改逻辑。

在此处阅读有关本机内容的所有信息：http: //www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

于 2012-07-16T14:10:56.747 回答
0

您需要使用回调并存储验证标志布尔值，然后您需要在用户提交注册页面之前对其进行检查。这是一个jquery实现，但是把它变成普通的js并不难。该方法在这里定义：

var goodUsername = false;

// keyup handler, pseudo code 
$('#username').keyup(function(event) { 
    // perform the username validation with an ajax call:
    $.ajax({
        url: "validateUsername.php"
    }).done(function(data) {
        // set the goodUsername if its good or not
        if (data.usernameIsGood)
            goodUserName = true;
    });
});

// submit the registration form only if the username has been checked and is good
$('#registrationFormButton').click(function(event){
     if (goodUsername)
         return true; // allows the browser to submit the form
     else
         return false;
});
于 2012-07-16T14:14:37.840 回答