通过Ajax调用从函数返回值

小编典典

通过Ajax调用从函数返回值

ajax

谁能告诉我如何将值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的菜鸟还差，因此也欢迎提出一般性改进代码的建议。

阅读 517

2020-07-26

共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

或通过将连续性传递给进行异步调用的函数：

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将继续进行，如果状态在到达returnstatus;变量时尚未更改，status则显然没有时间设置，并且脚本将无法按预期工作。在这种情况下，解决方案是始终执行returnfalse;，然后在事件触发时（即服务器以PHP的脚本输出响应），然后可以确定状态并提交表单（如果一切正常）。

2020-07-26