使用Ajax调用从函数返回值

Question

有人可以告诉我如何返回status函数返回值的值.

function checkUser() {
    var request;
    var status = false;

    //create xmlhttprequest object here [called request]

    var stu_id = document.getElementById("stu_id").value;
    var dName = document.getElementById("dName").value;
    var fileName = "check_user.php?dName=" + dName + "&stu_id=" + stu_id;
    request.open("GET", fileName, true);
    request.send(null);

    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            var resp = parseInt(request.responseText, 10);
            if(resp === 1) {
                alert("The display name has already been taken.");
                status = false;
            }
            else if(resp === 2) {
                alert("This student ID has already been registered");
                status = false;
            }
            else if(resp === 0) {
                status = true;
            }
        }
    }
    return status;
}

当您在注册表单中点击提交时,上述功能会触发(必须明显).问题是,无论响应是什么,此表单都会提交,并且警报框有时会显示[空白],有时根本不显示.但是,如果我将结束更改status为false手动[即替换status为false] ,则会在警告框中显示正确的值.

PS我比javascript中的菜鸟更糟糕,所以也欢迎一般改进代码的建议.

Answer 1

问题是,onreadystatechange直到......等待它才会开火......状态发生变化.因此,当您return status;大部分时间状态都没有时间设置时.您需要做的是return false;始终和内部onreadystatechange确定您是否要继续.如果您这样做,那么您提交表格.简而言之,获取处理返回值的代码,而不是从readystatechange处理程序中运行它.你可以直接这样做:

request.onreadystatechange = function() {
    if (request.readyState == 4) {
        var resp = parseInt(request.responseText, 10);
        switch (resp) {
        case 0:
            document.getElementById('myform').submit();
            break;
        case 1:
            alert("The display name has already been taken.");
            break;
        case 2:
            alert("This student ID has already been registered");
            break;
        }
    }
}
return false; // always return false initially

或者通过将continuation传递给进行异步调用的函数:

function checkUser(success, fail) {
    ...
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            var resp = parseInt(request.responseText, 10);
            switch (resp) {
            case 0:
                success(request.responseText);
            case 1:
                fail("The display name has already been taken.", request.reponseText);
                break;
            case 2:
                fail("This student ID has already been registered", request.reponseText);
                break;
            default:
                fail("Unrecognized resonse: "+resp, request.reponseText);
                break;
            }
        }
    }

除此之外,在默认情况下return false;你可能希望有一些指示某事情正在进行,也许禁用提交字段,显示加载圈等.否则如果需要很长时间才能获取,用户可能会感到困惑数据.

进一步说明

好吧,所以你的方式不起作用的原因主要在于这一行:

request.onreadystatechange = function() {

这样做是说当onreadystatechangeAJAX请求的更改时,您正在定义的匿名函数将运行.此代码不会立即执行.它正在等待事件发生.这是一个异步过程,所以在函数定义结束时,javascript将继续运行,如果状态在到达return status;变量时没有改变,status显然没有时间设置,你的脚本将无法按预期工作.在这种情况下的解决方案是始终return false;然后当事件触发时(即,服务器响应PHP的脚本输出),然后您可以确定状态并提交表单,如果一切都很好.